Hướng dẫn tạo button hover đẹp chỉ sử dụng css

views

A+A-

PrintEmail

Tạo nút button có style css đẹp là điều mà mọi nhà thiết kế website đều mong muốn. Bài viết này LaiXe.Xyz xin được phép chia sẻ hướng dẫn tạo button có  bong bóng và hiệu ứng đẹp khi bạn rê chuột vào

Demo Button

Bạn hãy rê chuột vào Button Hover Me dưới đây để cảm nhận hiệu ứng nhé

Hướng dẫn tạo Button

Các bạn thực hiện theo các bước sau nhé.
Bước 1: thêm code HTML
Mẹo: Bấm nút để copy code

<button style="--content: 'Hover me!';">
  <div class="left"></div>
    Hover me!
  <div class="right"></div>
</button>

Bước 2: thêm CSS
Mẹo: Bấm nút  để copy code

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,900');

:root {
  --text-color: hsla(210, 50%, 85%, 1);
  --shadow-color: hsla(210, 40%, 52%, .4);
  --btn-color: hsl(210, 80%, 42%);
  --bg-color: #141218;
}

* {
  box-sizing: border-box;
}

button {
  position:relative;
  padding: 10px 20px;  
  border: none;
  background: none;
  cursor: pointer;
  
  font-family: "Source Code Pro";
  font-weight: 900;
  text-transform: uppercase;
  font-size: 30px;  
  color: var(--text-color);
  
  background-color: var(--btn-color);
  box-shadow: var(--shadow-color) 2px 2px 22px;
  border-radius: 4px; 
  z-index: 0;  
  overflow: hidden;   
}

button:focus {
  outline-color: transparent;
  box-shadow: var(--btn-color) 2px 2px 22px;
}

.right::after, button::after {
  content: var(--content);
  display: block;
  position: absolute;
  white-space: nowrap;
  padding: 40px 40px;
  pointer-events:none;
}

button::after{
  font-weight: 200;
  top: -30px;
  left: -20px;
} 

.right, .left {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.right {
  left: 66%;
}
.left {
  right: 66%;
}
.right::after {
  top: -30px;
  left: calc(-66% - 20px);
  
  background-color: var(--bg-color);
  color:transparent;
  transition: transform .4s ease-out;
  transform: translate(0, -90%) rotate(0deg)
}

button:hover .right::after {
  transform: translate(0, -47%) rotate(0deg)
}

button .right:hover::after {
  transform: translate(0, -50%) rotate(-7deg)
}

button .left:hover ~ .right::after {
  transform: translate(0, -50%) rotate(7deg)
}

/* bubbles */
button::before {
  content: '';
  pointer-events: none;
  opacity: .6;
  background:
    radial-gradient(circle at 20% 35%,  transparent 0,  transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
    radial-gradient(circle at 75% 44%, transparent 0,  transparent 2px, var(--text-color) 3px, var(--text-color) 4px, transparent 4px),
    radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--text-color) 5px, var(--text-color) 6px, transparent 6px);

  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  position: absolute;
  animation: bubbles 5s linear infinite both;
}

@keyframes bubbles {
  from {
    transform: translate();
  }
  to {
    transform: translate(0, -66.666%);
  }
}

Full code

Các bạn cũng có thể xem Demo Full code tại đây nhé.
Chúc các bạn thực hiện thành công hiệu ứng button này.

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