How to custom button css - Insurance Finances

Hôm nay tôi sẽ giới thiệu cho các bạn cách custom button in css đẹp nhất, các bạn chỉ có làm theo và tận hưởng nó, với những hiệu ứng mượt mà, sống động giúp bạn tạo nên cho trang web của bạn thêm xinh đẹp hơn, bắt mắt hơn.

Để sử dụng công cụ lập trình css thì tôi sẽ không giới thiệu nữa, bởi ai ai cũng biết, nên tôi sẽ đi vào làm ngay và luôn nhé.
Thực hiện đoạn mã HTML như sau:

<nav>
  <ul>
    <li>
      Home
   
      <span></span><span></span><span></span><span></span>
    </li>
    <li>
      products
      <span></span><span></span><span></span><span></span>
    </li>
    <li>
      services
      <span></span><span></span><span></span><span></span>
    </li>
    <li>
     <a href="">TienAnhvn</a>
      <span></span><span></span><span></span><span></span>
    </li>
  </ul>
</nav>

Thực hiện đoạn mà CSS như sau:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    --c: goldenrod;
    color: var(--c);
    font-size: 16px;
    border: 0.3em solid var(--c);
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
}
nav ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--c);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
}
ul li a{
  text-decoration: none;
  color:yellow;

}
nav ul li:hover {
    color: black;
}
nav ul li:hover span {
    transform: translateY(0) scale(2);
}
nav ul li span:nth-child(1) {
    --n: 1;
}
nav ul li span:nth-child(2) {
    --n: 2;
}
nav ul li span:nth-child(3) {
    --n: 3;
}
nav ul li span:nth-child(4) {
    --n: 4;
}

Bạn có thể thay đổi màu sắc cho nó theo ý muốn của bạn, để ứng hộ chúng tôi các bạn hãy like fanpage của chúng tôi,nếu có bài viết mới bạn có thể theo dõi, chúng tôi sẽ cập nhật những custom button css tiếp theo.
Demo online :
Chúc các bạn học tốt.

Related Posts