Share Button cực kì thú zị

Chào các bạn đã trở lại honghaiblog hôm nay mình xin share button cực kì thú zị này...

Cách Thực hiện
Bước 1: Ta chèn đoạn code phía dưới vào trước thẻ ]]></b:skin>
.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;}
 Bước 2: Ta chèn code bên dưới vào nơi bạn muốn hiển thị
<button class="button-boxss">Demo Button<span>Vip.</span></button>
 nhớ chỉnh sửa sao cho phù hợp...

17 Nhận xét

Mới hơn Cũ hơn