Chia sẻ bộ Button cực đẹp cho Blog/Website

Ngoài chức năng là nút chuyển hướng đưa người dùng đến những website khác... thì button đẹp cũng đóng góp một phần tô thêm "vẻ đẹp" của trang web chúng ta nữa. Vậy thì hôm nay, HoangLam sẽ mạnh dạn share bộ Button đẹp cho blog/website. Ok, không dài dòng nữa, chúng ta cùng bắt đầu thôi.


Điểm qua một chút thông tin về Source:

Bước 1

Anh em vào giao diện chính của Blogger, đi từ Chủ đề >> Tùy chỉnh >> Chỉnh sửa HTML
Chúng ta sẽ tìm đến thẻ </body> bằng cách click vào chỗ bất kỳ trong đoạn code, nhấn tổ hợp phím ctrl + f và nhập giá trị cần tìm kiếm vào.

Bước 2

Các bạn nhanh tay copy lấy đoạn code dưới đây lại:
<style type="text/css">
   .HoangLam-custom-btn{width:130px;height:40px;color:#fff;border-radius:5px;padding:10px 25px;font-family:'Lato',sans-serif;font-weight:500;background:transparent;cursor:pointer;transition:all 0.3s ease;position:relative;display:inline-block;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);outline:none}.HoangLam-btn-1{background:rgb(6,14,131);background:linear-gradient(0deg,rgba(6,14,131,1) 0%,rgba(12,25,180,1) 100%);border:none}.HoangLam-btn-1:hover{background:rgb(0,3,255);background:linear-gradient(0deg,rgba(0,3,255,1) 0%,rgba(2,126,251,1) 100%)}.HoangLam-btn-2{background:rgb(96,9,240);background:linear-gradient(0deg,rgba(96,9,240,1) 0%,rgba(129,5,240,1) 100%);border:none}.HoangLam-btn-2:before{height:0%;width:2px}.HoangLam-btn-2:hover{box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.4)}.HoangLam-btn-3{background:rgb(0,172,238);background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);width:130px;height:40px;line-height:42px;padding:0;border:none}.HoangLam-btn-3 span{position:relative;display:block;width:100%;height:100%}.HoangLam-btn-3:before,.HoangLam-btn-3:after{position:absolute;content:"";right:0;top:0;background:rgba(2,126,251,1);transition:all 0.3s ease}.HoangLam-btn-3:before{height:0%;width:2px}.HoangLam-btn-3:after{width:0%;height:2px}.HoangLam-btn-3:hover{background:transparent;box-shadow:none}.HoangLam-btn-3:hover:before{height:100%}.HoangLam-btn-3:hover:after{width:100%}.HoangLam-btn-3 span:hover{color:rgba(2,126,251,1)}.HoangLam-btn-3 span:before,.HoangLam-btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:rgba(2,126,251,1);transition:all 0.3s ease}.HoangLam-btn-3 span:before{width:2px;height:0%}.HoangLam-btn-3 span:after{width:0%;height:2px}.HoangLam-btn-3 span:hover:before{height:100%}.HoangLam-btn-3 span:hover:after{width:100%}.HoangLam-btn-4{background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);line-height:42px;padding:0;border:none}.HoangLam-btn-4:hover{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3 0%,#03c8a8 74%)}.HoangLam-btn-4 span{position:relative;display:block;width:100%;height:100%}.HoangLam-btn-4:before,.HoangLam-btn-4:after{position:absolute;content:"";right:0;top:0;box-shadow:4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);transition:all 0.3s ease}.HoangLam-btn-4:before{height:0%;width:.1px}.HoangLam-btn-4:after{width:0%;height:.1px}.HoangLam-btn-4:hover:before{height:100%}.HoangLam-btn-4:hover:after{width:100%}.HoangLam-btn-4 span:before,.HoangLam-btn-4 span:after{position:absolute;content:"";left:0;bottom:0;box-shadow:4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);transition:all 0.3s ease}.HoangLam-btn-4 span:before{width:.1px;height:0%}.HoangLam-btn-4 span:after{width:0%;height:.1px}.HoangLam-btn-4 span:hover:before{height:100%}.HoangLam-btn-4 span:hover:after{width:100%}.HoangLam-btn-5{width:130px;height:40px;line-height:42px;padding:0;border:none;background:rgb(255,27,0);background:linear-gradient(0deg,rgba(255,27,0,1) 0%,rgba(251,75,2,1) 100%)}.HoangLam-btn-5:hover{color:#f0094a;background:transparent;box-shadow:none}.HoangLam-btn-5:before,.HoangLam-btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:400ms ease all}.HoangLam-btn-5:after{right:inherit;top:inherit;left:0;bottom:0}.HoangLam-btn-5:hover:before,.HoangLam-btn-5:hover:after{width:100%;transition:800ms ease all}.HoangLam-btn-6{background:rgb(247,150,192);background:radial-gradient(circle,rgba(247,150,192,1) 0%,rgba(118,174,241,1) 100%);line-height:42px;padding:0;border:none}.HoangLam-btn-6 span{position:relative;display:block;width:100%;height:100%}.HoangLam-btn-6:before,.HoangLam-btn-6:after{position:absolute;content:"";height:0%;width:1px;box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}.HoangLam-btn-6:before{right:0;top:0;transition:all 500ms ease}.HoangLam-btn-6:after{left:0;bottom:0;transition:all 500ms ease}.HoangLam-btn-6:hover{background:transparent;color:#76aef1;box-shadow:none}.HoangLam-btn-6:hover:before{transition:all 500ms ease;height:100%}.HoangLam-btn-6:hover:after{transition:all 500ms ease;height:100%}.HoangLam-btn-6 span:before,.HoangLam-btn-6 span:after{position:absolute;content:"";box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}.HoangLam-btn-6 span:before{left:0;top:0;width:0%;height:.5px;transition:all 500ms ease}.HoangLam-btn-6 span:after{right:0;bottom:0;width:0%;height:.5px;transition:all 500ms ease}.HoangLam-btn-6 span:hover:before{width:100%}.HoangLam-btn-6 span:hover:after{width:100%}.HoangLam-btn-7{background:linear-gradient(0deg,rgba(255,151,0,1) 0%,rgba(251,75,2,1) 100%);line-height:42px;padding:0;border:none}.HoangLam-btn-7 span{position:relative;display:block;width:100%;height:100%}.HoangLam-btn-7:before,.HoangLam-btn-7:after{position:absolute;content:"";right:0;bottom:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}.HoangLam-btn-7:before{height:0%;width:2px}.HoangLam-btn-7:after{width:0%;height:2px}.HoangLam-btn-7:hover{color:rgba(251,75,2,1);background:transparent}.HoangLam-btn-7:hover:before{height:100%}.HoangLam-btn-7:hover:after{width:100%}.HoangLam-btn-7 span:before,.HoangLam-btn-7 span:after{position:absolute;content:"";left:0;top:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}.HoangLam-btn-7 span:before{width:2px;height:0%}.HoangLam-btn-7 span:after{height:2px;width:0%}.HoangLam-btn-7 span:hover:before{height:100%}.HoangLam-btn-7 span:hover:after{width:100%}.HoangLam-btn-8{background-color:#f0ecfc;background-image:linear-gradient(315deg,#f0ecfc 0%,#c797eb 74%);line-height:42px;padding:0;border:none}.HoangLam-btn-8 span{position:relative;display:block;width:100%;height:100%}.HoangLam-btn-8:before,.HoangLam-btn-8:after{position:absolute;content:"";right:0;bottom:0;background:#c797eb;transition:all 0.3s ease}.HoangLam-btn-8:before{height:0%;width:2px}.HoangLam-btn-8:after{width:0%;height:2px}.HoangLam-btn-8:hover:before{height:100%}.HoangLam-btn-8:hover:after{width:100%}.HoangLam-btn-8:hover{background:transparent}.HoangLam-btn-8 span:hover{color:#c797eb}.HoangLam-btn-8 span:before,.HoangLam-btn-8 span:after{position:absolute;content:"";left:0;top:0;background:#c797eb;transition:all 0.3s ease}.HoangLam-btn-8 span:before{width:2px;height:0%}.HoangLam-btn-8 span:after{height:2px;width:0%}.HoangLam-btn-8 span:hover:before{height:100%}.HoangLam-btn-8 span:hover:after{width:100%}.HoangLam-btn-9{border:none;transition:all 0.3s ease;overflow:hidden}.HoangLam-btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background-color:#1fd1f9;background-image:linear-gradient(315deg,#1fd1f9 0%,#b621fe 74%);transition:all 0.3s ease}.HoangLam-btn-9:hover{background:transparent;box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);color:#fff}.HoangLam-btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg);box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)}.HoangLam-btn-10{background:rgb(22,9,240);background:linear-gradient(0deg,rgba(22,9,240,1) 0%,rgba(49,110,244,1) 100%);color:#fff;border:none;transition:all 0.3s ease;overflow:hidden}.HoangLam-btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all 0.3s ease;-webkit-transform:scale(.1);transform:scale(.1)}.HoangLam-btn-10:hover{color:#fff;border:none;background:transparent}.HoangLam-btn-10:hover:after{background:rgb(0,3,255);background:linear-gradient(0deg,rgba(2,126,251,1) 0%,rgba(0,3,255,1)100%);-webkit-transform:scale(1);transform:scale(1)}.HoangLam-btn-11{border:none;background:rgb(251,33,117);background:linear-gradient(0deg,rgba(251,33,117,1) 0%,rgba(234,76,137,1) 100%);color:#fff;overflow:hidden}.HoangLam-btn-11:hover{text-decoration:none;color:#fff}.HoangLam-btn-11:before{position:absolute;content:'';display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn1 3s ease-in-out infinite}.HoangLam-btn-11:hover{opacity:.7}.HoangLam-btn-11:active{box-shadow:4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}@-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0}80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1}100%{-webkit-transform:scale(50) rotate(45deg);opacity:0}}.HoangLam-btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px}.HoangLam-btn-12 span{background:rgb(0,172,238);background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);display:block;position:absolute;width:130px;height:40px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:5px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s}.HoangLam-btn-12 span:nth-child(1){box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.HoangLam-btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.HoangLam-btn-12:hover span:nth-child(1){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}.HoangLam-btn-12:hover span:nth-child(2){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);color:transparent;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}.HoangLam-btn-13{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3 0%,#03c8a8 74%);border:none;z-index:1}.HoangLam-btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:5px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all 0.3s ease}.HoangLam-btn-13:hover{color:#fff}.HoangLam-btn-13:hover:after{top:0;height:100%}.HoangLam-btn-13:active{top:2px}.HoangLam-btn-14{background:rgb(255,151,0);border:none;z-index:1}.HoangLam-btn-14:after{position:absolute;content:"";width:100%;height:0;top:0;left:0;z-index:-1;border-radius:5px;background-color:#eaf818;background-image:linear-gradient(315deg,#eaf818 0%,#f6fc9c 74%);box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5);7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all 0.3s ease}.HoangLam-btn-14:hover{color:#000}.HoangLam-btn-14:hover:after{top:auto;bottom:0;height:100%}.HoangLam-btn-14:active{top:2px}.HoangLam-btn-15{background:#b621fe;border:none;z-index:1}.HoangLam-btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#663dff;border-radius:5px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all 0.3s ease}.HoangLam-btn-15:hover{color:#fff}.HoangLam-btn-15:hover:after{left:0;width:100%}.HoangLam-btn-15:active{top:2px}.HoangLam-btn-16{border:none;color:#000}.HoangLam-btn-16:after{position:absolute;content:"";width:0;height:100%;top:0;left:0;direction:rtl;z-index:-1;box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all 0.3s ease}.HoangLam-btn-16:hover{color:#000}.HoangLam-btn-16:hover:after{left:auto;right:0;width:100%}.HoangLam-btn-16:active{top:2px}
</style>

Bước 3

Chúng ta sẽ dán toàn bộ đoạn code vừa copy ở bước 2 quay lại trang chỉnh sửa Html và dán vào trước thẻ </body> của website
Bước 4
Để sử dụng những Button trên, khi viết bài, mọi người chỉ cần chuyển sang chế độ soạn HTML và chèn các đoạn code tương ứng với các style button dưới đây:
<center><button class="HoangLam-custom-btn HoangLam-btn-1" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')">Button 1</button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-2" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')">Button 2</button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-3" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')"><span>Button 3</span></button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-4" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')"><span>Button 4</span></button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-5" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')"><span>Button 5</span></button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-6" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')"><span>Button 6</span></button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-7" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')"><span>Button 7</span></button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-8" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')"><span>Button 8</span></button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-9" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')">Button 9</button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-10" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')">Button 10</button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-11" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')">Button 11</button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-12" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')"><span>Click!</span><span>Button 12</span></button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-13" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')">Button 13</button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-14" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')">Button 14</button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-15" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')">Button 15</button></center>
<center><button class="HoangLam-custom-btn HoangLam-btn-16" target="blank" title="HoangLam - Support Nghệ An" onclick="window.open('https://HoangLamvn.blogspot.com/')">Button 16</button></center>

Trên đây là bộ 16 Button cực đẹp dành cho tất cả các website nới chung và website có darkmode nói riêng được thực hiện bởi HoangLam và CodePro. HoangLam - Chúc các bạn thành công.