Tạo Button Html và Css có hiệu ứng đơn giản

Đơ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 và không thể thiếu đó là các Button(nút).

Tạo Button Html và Css có hiệu ứng đơn giản
Tạo Button Html và Css có hiệu ứng đơn giản 4

Nay mình hướng dẫn các bạn cách để tạo button html và css có hiệu ứng đơn giản

Tạo Button Html và Css

HTML – Đặt vào vị trí cần hiển thị

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

CSS – Thêm một chút hiệu ứng cho Button

.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);
}

Xem thêm tại đây !

Leave a Reply