Share 2 Button hiệu ứng hover cực đẹp cho Blogspot

Có thể bạn sẽ thích

Vừa rồi mình có chia sẻ một button Flat cực đẹp cho các bạn tại bài viết Tạo button Flat đẹp và chuyên nghiệp cho Blogspot! Hôm nay, Kel xin chia sẻ tiếp một button hiệu ứng khi đưa chuột vào rất mượt và đẹp.

#Cách thực hiện

Style 1: 

Chép đoạn CSS bên dưới vào trước thẻ ]]></b:skin> hoặc thẻ </head>

.button_container {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
}
.button_container p {
    font-family: 'Roboto', cursive;
    text-align: center;
    font-size: 35px;
}
.btn {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background-color: #222;
  padding: 17px 60px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}
.btn span {
  position: relative; 
  z-index: 1;
}
.btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 490%;
  width: 140%;
  background: #39a0ff;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

Chép đoạn HTML dưới vào nơi bạn muốn hiển thị

<button class="btn"><span>CLICK HERE</span></button>

Style 2:

Chép đoạn CSS bên dưới vào trước thẻ ]]></b:skin> hoặc thẻ </head>

.button-boxss {
    font: 500 15px Roboto;
    border: 5px solid transparent;
    background: #52537d;
    color: #ffffff;
    border-radius: 40px;
    padding: 9px 30px;
    overflow: hidden;
    width: 200px;
    transition: all 1.2s, border 0.5s 1.2s, box-shadow 0.3s 1.5s;
    white-space: nowrap;
    text-indent: 12px;
    font-weight: bold; }
 .button-boxss span {
    display: inline-block;
    transform: translateX(300px);
    font-weight: normal;
    opacity: 0;
    transition:
      opacity 0.1s 0.5s,
      transform 0.4s 0.5s;
  }
.button-boxss:hover{
text-indent: 0;
    background: #52537d;
    color: #e4ba3a;
    width: 250px;
    border: 5px solid #7578cc;
    box-shadow: 3px 3px 2px rgba(black, 0.15);
}
 .button-boxss:hover span{
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;}

Chép đoạn HTML dưới vào nơi bạn muốn hiển thị

<button class="button-boxss">Demo Button <span> Vip Only!</span></button>

NOTE: Có thể tùy chỉnh CSS sao cho phù hợp với template của bạn!

Chúc các bạn thành công!

Hãy để lại comment phía dưới hoặc Chia sẻ bài viết để ủng hộ tác giả nhé!

Kelvin Dương

Mong muốn chia sẻ những hiểu biết cũng như kinh nghiệm của bản thân đến với mọi người

Life is not fair, get used to it

CHIA SẺ BÀI VIẾT

BÀI VIẾT LIÊN QUAN