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ẻ:


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ả:

Popular posts from this blog

Vietnix Free DirectAdmin, Giảm 30% trọn đời dịch vụ VPS

AZDIGI Giảm mạnh 50% Hosting chất, khuyến mãi Ngất

Thu gọn bài viết, mô tả chi tiết sản phẩm trên web/blog bằng javascrpit