1BANNER 123
4.9/5 - (247 bình chọn)

Hôm nay mình sẽ share 1 số hiệu ứng hover button đẹp mà mình sưu tầm được. Hi vọng với những đoạn CSS này sẽ giúp cho website của các bạn trở nên lung linh hơn.

Demo các bạn có thể xem tại đây

Mình sẽ cập nhật thường xuyên, vì vậy các bạn có thể quay lại xem khi cần nhé.

Mẫu hover button style 1

Click me!

Mình đặt class button là btn-hover

Dat Class Button
Đặt class button là btn-hover
.btn-hover{
	position: relative;
    background-color: unset;
}
.btn-hover span{
	background-color: unset;
    position: relative;
}
.btn-hover:hover:before {
    width: 0;
}
.btn-hover:before{
    bottom: inherit;
    left: inherit;
    position: absolute;
    right: 0;
    top: 0;
    background: #f9c32f;
    content: "";
    height: 100%;
    width: 100%;
	transition: width .25s ease-in 0s;
}
.btn-hover:after {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    border: 2px solid #f9c32f;
    content: "";
}

Mẫu hover button style 2

Click me!

Mình đặt class button là btn-hover-2

Dat Class Button 2
Đặt class button là btn-hover-2
.btn-hover-2:before{
	content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #717071;
  transform: translateY(-100%);
  transition: all 0.5s;
}
.btn-hover-2:hover {
  background-color: red!important;
  color: #fff;
}
.btn-hover-2:hover:before {
  transform: translateY(110%);
}
.btn-hover-2{
	overflow: hidden;
}

Mẫu hover button style 3

Click me!

Mình đặt class button là button-fly

Dat Class Button Fly
Đặt class button là button-fly
 .button-fly {
	 --background: #275efe;
	 --text: #fff;
	 --font-size: 16px;
	 --duration: 0.44s;
	 --move-hover: -4px;
	 --shadow: 0 2px 8px -1px rgba(39, 94, 254, .32);
	 --shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, .5);
	 --font-shadow: var(--font-size);
	 box-shadow: var(--shadow);
	 transform: translateY(var(--y)) translateZ(0);
	 transition: transform var(--duration) ease, box-shadow var(--duration) ease;
}
 .button-fly div {
	 display: inline-flex;
	 overflow: hidden;
	 text-shadow: 0 var(--font-shadow) 0 var(--text);
	 justify-content: center;
	 height: 22px;
}
 .button-fly div span {
	 display: block;
	 backface-visibility: hidden;
	 font-style: normal;
	 transition: transform var(--duration) ease;
	 transform: translateY(var(--m)) translateZ(0);
}
 .button-fly div span:nth-child(1) {
	 transition-delay: 0.05s;
}
 .button-fly div span:nth-child(2) {
	 transition-delay: 0.1s;
}
 .button-fly div span:nth-child(3) {
	 transition-delay: 0.15s;
}
 .button-fly div span:nth-child(4) {
	 transition-delay: 0.2s;
}
 .button-fly div span:nth-child(5) {
	 transition-delay: 0.25s;
}
 .button-fly div span:nth-child(6) {
	 transition-delay: 0.3s;
}
 .button-fly div span:nth-child(7) {
	 transition-delay: 0.35s;
}
 .button-fly div span:nth-child(8) {
	 transition-delay: 0.4s;
}
 .button-fly div span:nth-child(9) {
	 transition-delay: 0.45s;
}
 .button-fly div span:nth-child(10) {
	 transition-delay: 0.5s;
}
 .button-fly div span:nth-child(11) {
	 transition-delay: 0.55s;
}
 .button-fly:hover {
	 --y: var(--move-hover);
	 --shadow: var(--shadow-hover);
}
 .button-fly:hover span {
	 --m: calc(var(--font-size) * -1);
}

Thêm một chút js nữa là ổn.

<script> 
		jQuery(document).ready(function($) { 
			document.querySelectorAll('.button-fly').forEach(button => button.innerHTML = '<div><span>' + button.textContent.trim().split('').join('</span><span>') + '</span></div>');
		} );
</script>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *