Tạo Button Cho Blogspot Với Hiệu Ứng Cực Đẹp

TẠO BUTTON CHO BLOGSPOT

A nhông sê ô, hôm nay lượn lờ trên google lượm được một vào quả button trông khá đẹp nên mình đã đem về test thử trên blog thấy ổn phết nên quyết định share cho mọi người luôn.

Tạo Button Cho Blogspot Với Hiệu Ứng Cực Đẹp

HƯỚNG DẪN

CSS:

• Coppy đoạn code bên dưới:

  <style type="text/css">  
    .fill:hover,.fill:focus{box-shadow:inset 0 0 0 2em var(--hover)}.close:hover,.close:focus{box-shadow:inset -3.5em 0 0 0 var(--hover),inset 3.5em 0 0 0 var(--hover)}.raise:hover,.raise:focus{color:#ffec48;box-shadow:0 0.5em 0.5em -0.4em var(--hover);transform:translateY(-0.25em)}.up:hover,.up:focus{box-shadow:inset 0 -3.25em 0 0 var(--hover)}.slide:hover,.slide:focus{box-shadow:inset 6.5em 0 0 0 var(--hover)}.offset{box-shadow:0.3em 0.3em 0 0 var(--color),inset 0.3em 0.3em 0 0 var(--color)}.offset:hover,.offset:focus{box-shadow:0 0 0 0 var(--hover),inset 6em 3.5em 0 0 var(--hover)}.fill{--color:#a972cb;--hover:#cb72aa}.close{--color:#ff7f82;--hover:#ffdc7f}.raise{--color:#ffa260;--hover:#ffec48}.up{--color:#e4cb58;--hover:#94e458}.slide{--color:#8fc866;--hover:#66c887}.offset{--color:#19bc8b;--hover:#1973bc}button{color:var(--color);transition:0.25s}button:hover,button:focus{border-color:var(--hover);color:#fff}button{background:none;border:2px solid;font:inherit;line-height:1;cursor:pointer;padding:1em 2em}
  </style>
  
  

• Dán toàn bộ đoạn code trên vào trước thẻ </body>, sau đó Lưu lại.

DEMO BUTTON VÀ CODE:

Các bạn chọn button rồi coppy đọan code bên dưới vào nơi muốn đặt button là được.

<center><button class="fill" onclick="window.open('https://www.phamvanlinh.gq/')" target="blank" title="Phạm Văn Linh">Fill In</button></center>

<center><button class="close" onclick="window.open('https://www.phamvanlinh.gq/')" target="blank" title="Phạm Văn Linh">Close</button></center>

<center><button class="raise" onclick="window.open('https://www.phamvanlinh.gq/')" target="blank" title="Phạm Văn Linh">Raise</button></center>

 <center><button class="up" onclick="window.open('https://www.phamvanlinh.gq/')" target="blank" title="Phạm Văn Linh">Fill Up</button></center>

<center><button class="slide" onclick="window.open('https://www.phamvanlinh.gq/')" target="blank" title="Phạm Văn Linh">Slide</button></center>

<center><button class="offset" onclick="window.open('https://www.phamvanlinh.gq/')" target="blank" title="Phạm Văn Linh">Offset</button></center>

LỜI KẾT

Vậy là mình đã chia sẻ cho các bạn một số button mà mình đã tìm được... Nếu thấy bài viết có ích hãy để lại comment ở bên dưới để mình biết và có động lực ra nhiều bài tiếp nhé !!!

Đánh Giá Bài Viết: