Hướng dẫn hiệu ứng button css

Button là thành phần không thể thiếu trên bất kỳ website nào, trên các website khác nhau các bạn sẽ thấy nhiều kiểu button được thiết kế khác nhau, bên cạnh đó hiệu ứng trên các button cũng là một cách nhấn mạnh vai trò quan trọng của nó. Bài viết này tôi sẽ hướng dẫn các bạn tạo hiệu ứng khi hover lên button, tất cả các hiệu ứng được tạo ra chỉ bằng các dòng mã lệnh CSS đơn giản, gọn gàng.

Qua các dòng mã lệnh CSS của tôi, các bạn vẫn có thể tuỳ chỉnh mã lệnh để tạo ra các hiệu ứng riêng của mình. Bây giờ, các bạn tạo một button như sau:

HTML:

Tiếp theo, các bạn tạo hiệu ứng khi hover lên button như sau:

CSS:

button {
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    color: #1d9af2;
    cursor: pointer;
    opacity: 0.5;
    background-color: #292d3e;
    border: 1px solid #1d9af2;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

button:hover {
    transform: rotateZ(-30deg);
}

Một hiệu ứng khác:

CSS:

button {
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    color: #1d9af2;
    cursor: pointer;
    background-color: #292d3e;
    border: 1px solid #1d9af2;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

button:hover {
    box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea;
    transform: translateX(-3px);
}

Và cuối cùng là một hiệu ứng đẹp mắt khác:

CSS:

button {
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    color: #1d9af2;
    cursor: pointer;
    background-color: #292d3e;
    border: 1px solid #1d9af2;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

button:hover {
    animation: swing 1s ease;
    animation-iteration-count: 1;
}

@keyframes swing {
    15% {
        transform: translateX(5px);
    }
    
    30% {
        transform: translateX(-5px);
    }
    
    50% {
        transform: translateX(3px);
    }
    
    65% {
        transform: translateX(-3px);
    }
    
    80% {
        transform: translateX(2px);
    }
    
    100% {
        transform: translateX(0);
    }
}

 

Bài viết này mình xin phép giới thiệu một số hiệu ứng hover cho button khá đẹp mà cũng khá đơn giản, rất dễ áp dụng.

Note: Do mình không biết cắt nghĩa và đặt tên cho effect thế nào nên mình chỉ để tên lần lượt là effect 1, effect 2,.. nhé. Mong các bạn thông cảm.

1. Effect 1

Effect này có hơi đặc biệt so với các effect còn lại là sử dụng svg để tạo animation cho button. Khá đặc biệt tuy nhiên rất đẹp mắt.

HTML

  

    

      

        
          
          Hover
        
      

      

        
          
          Hover
        
      
    
  

Phần CSS chung

body {
  background-color: #222;
}

#main {
  margin-top: 200px;
}

.btn {
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size:16px;
  font-weight: 400;
  line-height: 36px;
  margin: 0 0 2em;
  max-width: 160px; 
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%; 
}

CSS

.btn-1 {
  font-weight: 100;
  transition: all .25s;

  svg {
    height: 45px;
    left: 0;
    position: absolute;
    top: 0; 
    width: 100%; 
  }
  
  rect {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: 422, 0;
      transition-delay: none;
  }
}

.btn-1:hover {
  font-weight: 900;
  letter-spacing: 2px;
  rect {
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 48;
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  }
}

.btn-1.color-green:hover {
  color: green;
  rect {
    stroke: green;
  }
}

.btn-1.color-blue:hover {
  color: blue;
  rect {
    stroke: blue;
  }
}

Result

2. Effect 2

Effect này khá đơn giản. Nếu hiểu và sử dụng thành thạo :before và :after thì sẽ dễ dàng làm được effect này.

HTML

  

    

      

        
          Hover
        
      

      

        
          Hover
        
      
    
  

CSS

.btn-2 {
    letter-spacing: 0;
}

.btn-2.color-green:hover,
.btn-2.color-green:active {
  color: green;
}

.btn-2.color-blue:hover,
.btn-2.color-blue:active {
  color: blue;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 5px;
}

.btn-2:after,
.btn-2:before {
  backface-visibility: hidden;
  border: 1px solid rgba(#fff, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  transition: all 280ms ease-in-out;
  width: 0;
  opacity: 0;
}

.btn-2.color-green:after,
.btn-2.color-green:before {
  border: 1px solid green;
}

.btn-2.color-blue:after,
.btn-2.color-blue:before {
  border: 1px solid blue;
}

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  transition: width 350ms ease-in-out;
  width: 70%;
  opacity: 1;
}

Result:

3. Effect 3

HTML

  

    

      

        
          Hover
        
      
    
  

CSS

.btn-3 {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, .5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
} 

.btn-3:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388; 
}

Result

Hy vọng với những chia sẻ trên của mình, sẽ giúp các bạn có thể tạo thêm những hiệu ứng đẹp cho website của mình.