Tạo một số hiệu ứng chuyển động Button Hover Animation

views

A+A-

PrintEmail

Hiệu ứng cho button thì nhiều vô kể. Ở các bài viết trước, LaiXe.Xyz cũng đã chia sẻ rất nhiều mẫu hiệu ứng khi rê chuột vào button. Bài viết này xin tiếp tục hướng dẫn thêm cách tạo một số hiệu ứng chuyển động Button Hover Animation

Button Animation Hover Effect #1

Rê Chuột Vào Đây

Button này khá đơn giản và nhẹ nhàng. Bằng cách sử dụng thuộc tính transition để thay đổi chiều dài và chiều cao của đường viền khi bạn rê chuột vào.
Điều đặc biệt, thông thương đường viền sẽ được sử dụng thuộc tính border nhưng ở ví dụ này việc tạo đường viền được thực hiện bằng 2 thuộc tính :before và :after Cách thực hiện
Bước 1: Thêm HTML sau
Mẹo: Bấm nút để copy code

<div class="data-container">
  <span class="btn">Rê Chuột Vào Đây</span>
</div>

Bước 2: Thêm CSS sau

.btn {
  cursor: pointer;
  position: relative;
  padding: 10px 20px;
  background: #fff;
  font-size: 28px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 1s;
}
.btn:after,.btn:before {
  content: " ";
  width: 10px;
  height: 10px;
  position: absolute;
  border: 0px solid #fff;
  transition: all 1s;
}
.btn:after {
  top: -1px;
  left: -1px;
  border-top: 5px solid black;
  border-left: 5px solid black;
}
.btn:before {
  bottom: -1px;
  right: -1px;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
}
.btn:hover {
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.btn:hover:before,.btn:hover:after {
  width: 100%;
  height: 100%;
}
.data-container {
  text-align: center;
  background: #ffebee;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Button Animation Hover Effect #2

Button

Ví dụ về Button này cũng tương tự như ở nút Button đầu tiên
Cách thực hiện như sau
Bước 1: Thêm mã HTML

<div id='vd2'>
<a href="#"><span></span>Button</a>
</div> 

Bước 2: Thêm CSS như sau

#vd2{
  text-align: center;
  background: #6b6868;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;position:relative;overflow:hidden

}
#vd2 a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 50px;
  background: #262626;
  text-transform: uppercase;
  text-align: center;
  line-height: 50px;
  color: #ff0;
  text-decoration: none;
  font-size: 20px;
  font-family: verdana;
  letter-spacing: 4px;
}
#vd2 a:before,
#vd2 a:after,
#vd2 span:before,
#vd2 span:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;background: #ff0;
  transition: 1s;
  mix-blend-mode: hue;
}

#vd2 a:before {
  top: -2px;
  left: -2px;
}

#vd2 a:after {
  top: -2px;
  right: -2px;
}

#vd2 span:before {
  bottom: -2px;
  left: -2px;
}

#vd2 span:after {
  bottom: -2px;
  right: -2px;
}

#vd2 a:hover:before,
#vd2 a:hover:after,
#vd2 a:hover span:before,
#vd2 a:hover span:after {
  width: calc(180px / 2);
  height: calc(50px / 2);
}

Chuyên Mục : Animation Css Chia sẻ CSS Hover effect css Hướng dẫn Tạo button css Thiết kế website