Button Có Hiệu Ứng Khi Di Chuột Vào Cho Blogspot

Xin chào, nếu bạn đang tìm kiếm 1 button hiện đại cho blog của mình tăng độ đẹp mắt cho người dùng. Trong bài này, tôi sẽ hướng dẫn làm button bằng CSS khi di chuột vào có hiệu ứng đẹp đẽ và đặc biệt nó có 11 màu cho bạn lựa chọn như hình ảnh dưới đây:

Button Có Hiệu Ứng Khi Di Chuột Vào Cho Blogspot
Button Có Hiệu Ứng Khi Di Chuột Vào Cho Blogspot 
Các bước thực hiện:

Bước 1: Thêm mã CSS

Đầu tiên bạn vào chỉnh sửa HTML và tìm đến ]]> </ b: skin> và thêm đoạn CSS dưới nó:

/* Gradient Button CSS Codes */
  *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.buttons{margin:10%;text-align:center}
.btn-hover{width:200px;font-size:16px;font-weight:600;color:#fff;cursor:pointer;margin:20px;height:55px;text-align:center;border:none;background-size:300% 100%;border-radius:50px;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.btn-hover:hover{background-position:100% 0;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
.btn-hover:focus{outline:none}
.btn-hover.color-1{background-image:linear-gradient(to right,#25aae1,#40e495,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(49,196,190,0.75)}
.btn-hover.color-2{background-image:linear-gradient(to right,#f5ce62,#e43603,#fa7199,#e85a19);box-shadow:0 4px 15px 0 rgba(229,66,10,0.75)}
.btn-hover.color-3{background-image:linear-gradient(to right,#667eea,#764ba2,#6B8DD6,#8E37D7);box-shadow:0 4px 15px 0 rgba(116,79,168,0.75)}
.btn-hover.color-4{background-image:linear-gradient(to right,#fc6076,#ff9a44,#ef9d43,#e75516);box-shadow:0 4px 15px 0 rgba(252,104,110,0.75)}
.btn-hover.color-5{background-image:linear-gradient(to right,#0ba360,#3cba92,#30dd8a,#2bb673);box-shadow:0 4px 15px 0 rgba(23,168,108,0.75)}
.btn-hover.color-6{background-image:linear-gradient(to right,#009245,#FCEE21,#00A8C5,#D9E021);box-shadow:0 4px 15px 0 rgba(83,176,57,0.75)}
.btn-hover.color-7{background-image:linear-gradient(to right,#6253e1,#852D91,#A3A1FF,#F24645);box-shadow:0 4px 15px 0 rgba(126,52,161,0.75)}
.btn-hover.color-8{background-image:linear-gradient(to right,#29323c,#485563,#2b5876,#4e4376);box-shadow:0 4px 15px 0 rgba(45,54,65,0.75)}
.btn-hover.color-9{background-image:linear-gradient(to right,#25aae1,#4481eb,#04befe,#3f86ed);box-shadow:0 4px 15px 0 rgba(65,132,234,0.75)}
.btn-hover.color-10{background-image:linear-gradient(to right,#ed6ea0,#ec8c69,#f7186a,#FBB03B);box-shadow:0 4px 15px 0 rgba(236,116,149,0.75)}
.btn-hover.color-11{background-image:linear-gradient(to right,#eb3941,#f15e64,#e14e53,#e2373f);box-shadow:0 5px 15px rgba(242,97,103,.4)}

Bước 2: Thêm mã HTML

Khi bạn viết bài để đăng lên blog bạn chỉ cần thêm đoạn code HTML sau vào chỗ bạn muốn đặt button ( nhớ phải chuyển sang chế độ HTML nhé )

<div class="buttons">
  <button class="btn-hover color-1">BUTTON</button>
    <button class="btn-hover color-2">BUTTON</button>
    <button class="btn-hover color-3">BUTTON</button>
    <button class="btn-hover color-4">BUTTON</button>
    <button class="btn-hover color-5">BUTTON</button>
    <button class="btn-hover color-6">BUTTON</button>
    <button class="btn-hover color-7">BUTTON</button>
    <button class="btn-hover color-8">BUTTON</button>
    <button class="btn-hover color-9">BUTTON</button>
    <button class="btn-hover color-10">BUTTON</button>
    <button class="btn-hover color-11">BUTTON</button>
</div> 
Có mấy loại màu bạn thích màu nào thì lấy đoạn HTML đó cho vào thôi.

Trên đây là hướng dẫn làm button bằng CSS có hiệu ứng khi chuột vào nó, nếu bạn có thắc mắc hay lỗi khi thực hiện hãy comment xuống dưới mình sẽ giải đáp. Cảm ơn bạn đã đọc bài!

Đăng nhận xét

Mới hơn Cũ hơn

Nhận xét Mới