Button Effects (Hiệu Ứng) đơn giản chỉ bằng CSS cho Blogspot

Với xu hướng WEB càng hiện đại phát triển thì việc thiết kế một giao diện gọn nhẹ, dễ nhìn là một điều rất cần thiết. Đơn giản giúp cho việc đưa thông tin đến người đọc một cách dễ dàng, dễ tiếp thu nhìn nhận. Và một trong số đó là việc đơn giản hóa những bố cục, màu sắc, button(nút)...

Chính vì vậy mà hôm nay mình sẽ chia sẻ cho các bạn một Button Effects đơn giản cho Blogspot.
Bạn cũng có thể tham khảo 3 Style trước mình từng chia sẻ:

• Tạo Button Với Hiệu Ứng Tuyệt Đẹp Style 3
• Button Với Hiệu Ứng Cực Đẹp Style 2
• Tạo Button Bằng CSS Có Hiệu Ứng Đẹp Cho Blogspot

HTML

 <div class="middle">
 <button class="btn btn1">Hover Me</button>
 <button class="btn btn2">Hover Me</button>
 </div>

Viết CSS

.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
.btn{
  background: none;
  border: 2px solid #000;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  padding: 12px 20px;
  min-width: 200px;
  margin: 10px;
  cursor: pointer;
  transition: color 0.4s linear;
  position: relative;
}
.btn:hover{
  color: #fff;
}
.btn::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -1;
  transition: transform 0.5s;
  transform-origin: 0 0;
  transition-timing-function: cubic-bezier(0.5,1.6,0.4,0.7);
}
.btn1::before{
  transform: scaleX(0);
}
.btn2::before{
  transform: scaleY(0);
}
.btn1:hover::before{
  transform: scaleX(1);
}
.btn2:hover::before{
  transform: scaleY(1);
}

Để lại bình luận để được hỗ trợ nhé.

Kết Quả: