input license here

How to custom button css

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.
How to custom button css

Để 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
Diệp Quân
Nguyen Manh Cuong is the author and founder of the vmwareplayerfree blog. With over 14 years of experience in Online Marketing, he now runs a number of successful websites, and occasionally shares his experience & knowledge on this blog.
SHARE

Related Posts

Subscribe to get free updates

Post a Comment

Sticky