Hướng dẫn tạo button với hiệu ứng chuyển động Animation

Thành Trương Blog

5/27/2024 11:09:45 PM

Published 5/24/2024 09:27:00 PM

Table Of Contents

Chào tất cả anh em. Hôm nay, mình tiếp tục chia sẻ đến anh em một số code để anh em tạo ra những button với hiệu ứng chuyển động Animation trong CSS3 vô cùng đẹp mắt, ứng dụng được trong nhiều tình huống khác nhau. Khi sử dụng button, anh em dễ dàng điều hướng người dùng hơn, cũng tạo được dấu ấn đặc biệt cho người đọc.

Hướng dẫn tạo button với hiệu ứng chuyển động Animation

CSS Animation là gì?

Animation là các hiệu ứng chuyển động, được sử dụng để tạo sự sống động cho các phần tử trên trang web. Hiện nay, hiệu ứng này được ứng dụng rộng rãi trên nhiều website nhằm tăng trải nghiệm người dùng.

Để tạo một chuyển động Animation, bạn cần đến các keyframe. Mỗi keyframe sẽ hoạt động tại một thời điểm xác định và quy định cách phần tử di chuyển.

Trong bài viết này, chúng ta sẽ tập trung vào việc tạo và sử dụng button Animation thay vì đi sâu vào các khái niệm về chuyển động Animation. Hãy cùng bắt đầu ngay nhé!

Cách tạo button với Animation

Bước 1: Đăng nhập vào trang quản lý Blogger
Bước 2: Ấn vào Chủ đề → Chỉnh sửa HTML
Bước 3: Bạn hãy copy đoạn CSS dưới đây và dán vào phía trên </body>

<style type="text/css">
    .thanhtruongblog-custom-btn{width:130px;height:40px;color:#fff;border-radius:5px;padding:10px;font-family:'Inter',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}.thanhtruongblog-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}.thanhtruongblog-btn-1:hover{background:rgb(0,3,255);background:linear-gradient(0deg,rgba(0,3,255,1) 0%,rgba(2,126,251,1) 100%)}.thanhtruongblog-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}.thanhtruongblog-btn-2:before{height:0%;width:2px}.thanhtruongblog-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)}.thanhtruongblog-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}.thanhtruongblog-btn-3 span{position:relative;display:block;width:100%;height:100%}.thanhtruongblog-btn-3:before,.thanhtruongblog-btn-3:after{position:absolute;content:"";right:0;top:0;background:rgba(2,126,251,1);transition:all 0.3s ease}.thanhtruongblog-btn-3:before{height:0%;width:2px}.thanhtruongblog-btn-3:after{width:0%;height:2px}.thanhtruongblog-btn-3:hover{background:transparent;box-shadow:none}.thanhtruongblog-btn-3:hover:before{height:100%}.thanhtruongblog-btn-3:hover:after{width:100%}.thanhtruongblog-btn-3 span:hover{color:rgba(2,126,251,1)}.thanhtruongblog-btn-3 span:before,.thanhtruongblog-btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:rgba(2,126,251,1);transition:all 0.3s ease}.thanhtruongblog-btn-3 span:before{width:2px;height:0%}.thanhtruongblog-btn-3 span:after{width:0%;height:2px}.thanhtruongblog-btn-3 span:hover:before{height:100%}.thanhtruongblog-btn-3 span:hover:after{width:100%}.thanhtruongblog-btn-4{background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);line-height:42px;padding:0;border:none}.thanhtruongblog-btn-4:hover{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3 0%,#03c8a8 74%)}.thanhtruongblog-btn-4 span{position:relative;display:block;width:100%;height:100%}.thanhtruongblog-btn-4:before,.thanhtruongblog-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}.thanhtruongblog-btn-4:before{height:0%;width:.1px}.thanhtruongblog-btn-4:after{width:0%;height:.1px}.thanhtruongblog-btn-4:hover:before{height:100%}.thanhtruongblog-btn-4:hover:after{width:100%}.thanhtruongblog-btn-4 span:before,.thanhtruongblog-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}.thanhtruongblog-btn-4 span:before{width:.1px;height:0%}.thanhtruongblog-btn-4 span:after{width:0%;height:.1px}.thanhtruongblog-btn-4 span:hover:before{height:100%}.thanhtruongblog-btn-4 span:hover:after{width:100%}.thanhtruongblog-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%)}.thanhtruongblog-btn-5:hover{color:#f0094a;background:transparent;box-shadow:none}.thanhtruongblog-btn-5:before,.thanhtruongblog-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}.thanhtruongblog-btn-5:after{right:inherit;top:inherit;left:0;bottom:0}.thanhtruongblog-btn-5:hover:before,.thanhtruongblog-btn-5:hover:after{width:100%;transition:800ms ease all}.thanhtruongblog-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}.thanhtruongblog-btn-6 span{position:relative;display:block;width:100%;height:100%}.thanhtruongblog-btn-6:before,.thanhtruongblog-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)}.thanhtruongblog-btn-6:before{right:0;top:0;transition:all 500ms ease}.thanhtruongblog-btn-6:after{left:0;bottom:0;transition:all 500ms ease}.thanhtruongblog-btn-6:hover{background:transparent;color:#76aef1;box-shadow:none}.thanhtruongblog-btn-6:hover:before{transition:all 500ms ease;height:100%}.thanhtruongblog-btn-6:hover:after{transition:all 500ms ease;height:100%}.thanhtruongblog-btn-6 span:before,.thanhtruongblog-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)}.thanhtruongblog-btn-6 span:before{left:0;top:0;width:0%;height:.5px;transition:all 500ms ease}.thanhtruongblog-btn-6 span:after{right:0;bottom:0;width:0%;height:.5px;transition:all 500ms ease}.thanhtruongblog-btn-6 span:hover:before{width:100%}.thanhtruongblog-btn-6 span:hover:after{width:100%}.thanhtruongblog-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}.thanhtruongblog-btn-7 span{position:relative;display:block;width:100%;height:100%}.thanhtruongblog-btn-7:before,.thanhtruongblog-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}.thanhtruongblog-btn-7:before{height:0%;width:2px}.thanhtruongblog-btn-7:after{width:0%;height:2px}.thanhtruongblog-btn-7:hover{color:rgba(251,75,2,1);background:transparent}.thanhtruongblog-btn-7:hover:before{height:100%}.thanhtruongblog-btn-7:hover:after{width:100%}.thanhtruongblog-btn-7 span:before,.thanhtruongblog-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}.thanhtruongblog-btn-7 span:before{width:2px;height:0%}.thanhtruongblog-btn-7 span:after{height:2px;width:0%}.thanhtruongblog-btn-7 span:hover:before{height:100%}.thanhtruongblog-btn-7 span:hover:after{width:100%}.thanhtruongblog-btn-8{background-color:#f0ecfc;background-image:linear-gradient(315deg,#f0ecfc 0%,#c797eb 74%);line-height:42px;padding:0;border:none}.thanhtruongblog-btn-8 span{position:relative;display:block;width:100%;height:100%}.thanhtruongblog-btn-8:before,.thanhtruongblog-btn-8:after{position:absolute;content:"";right:0;bottom:0;background:#c797eb;transition:all 0.3s ease}.thanhtruongblog-btn-8:before{height:0%;width:2px}.thanhtruongblog-btn-8:after{width:0%;height:2px}.thanhtruongblog-btn-8:hover:before{height:100%}.thanhtruongblog-btn-8:hover:after{width:100%}.thanhtruongblog-btn-8:hover{background:transparent}.thanhtruongblog-btn-8 span:hover{color:#c797eb}.thanhtruongblog-btn-8 span:before,.thanhtruongblog-btn-8 span:after{position:absolute;content:"";left:0;top:0;background:#c797eb;transition:all 0.3s ease}.thanhtruongblog-btn-8 span:before{width:2px;height:0%}.thanhtruongblog-btn-8 span:after{height:2px;width:0%}.thanhtruongblog-btn-8 span:hover:before{height:100%}.thanhtruongblog-btn-8 span:hover:after{width:100%}.thanhtruongblog-btn-9{border:none;transition:all 0.3s ease;overflow:hidden}.thanhtruongblog-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}.thanhtruongblog-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}.thanhtruongblog-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)}.thanhtruongblog-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}.thanhtruongblog-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)}.thanhtruongblog-btn-10:hover{color:#fff;border:none;background:transparent}.thanhtruongblog-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)}.thanhtruongblog-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}.thanhtruongblog-btn-11:hover{text-decoration:none;color:#fff}.thanhtruongblog-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}.thanhtruongblog-btn-11:hover{opacity:.7}.thanhtruongblog-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}}.thanhtruongblog-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}.thanhtruongblog-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}.thanhtruongblog-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}.thanhtruongblog-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}.thanhtruongblog-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)}.thanhtruongblog-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)}.thanhtruongblog-btn-13{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3 0%,#03c8a8 74%);border:none;z-index:1}.thanhtruongblog-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}.thanhtruongblog-btn-13:hover{color:#fff}.thanhtruongblog-btn-13:hover:after{top:0;height:100%}.thanhtruongblog-btn-13:active{top:2px}.thanhtruongblog-btn-14{background:rgb(255,151,0);border:none;z-index:1}.thanhtruongblog-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}.thanhtruongblog-btn-14:hover{color:#000}.thanhtruongblog-btn-14:hover:after{top:auto;bottom:0;height:100%}.thanhtruongblog-btn-14:active{top:2px}.thanhtruongblog-btn-15{background:#b621fe;border:none;z-index:1}.thanhtruongblog-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}.thanhtruongblog-btn-15:hover{color:#fff}.thanhtruongblog-btn-15:hover:after{left:0;width:100%}.thanhtruongblog-btn-15:active{top:2px}.thanhtruongblog-btn-16{border:none;color:#000}.thanhtruongblog-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}.thanhtruongblog-btn-16:hover{color:#000}.thanhtruongblog-btn-16:hover:after{left:auto;right:0;width:100%}.thanhtruongblog-btn-16:active{top:2px}
</style>

Bước 4: Lưu chủ đề.

Một số mẫu và cách dẫn sử dụng button

Dưới đây là 16 mẫu button với các hiệu ứng Animation đa dạng. Hãy chọn mẫu bạn thích và sao chép đoạn mã tương ứng để sử dụng!

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-1" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')">Read More</button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-2" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')">Read More</button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-3" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')"><span>Read More</span></button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-4" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')"><span>Read More</span></button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-5" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')"><span>Read More</span></button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-6" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')"><span>Read More</span></button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-7" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')"><span>Read More</span></button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-8" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')"><span>Read More</span></button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-9" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')">Read More</button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-10" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')">Read More</button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-11" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')">Read More</button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-12" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')"><span>Click!</span><span>Read More</span></button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-13" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')">Read More</button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-14" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')">Read More</button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-15" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')">Read More</button></center>

<center><button class="thanhtruongblog-custom-btn thanhtruongblog-btn-16" target="blank" title="Thành Trương Blog" onclick="window.open('https://www.thanhtruongblog.com/')">Read More</button></center>

Kết luận

Trên đây là toàn bộ code và hướng dẫn tạo button với hiệu ứng Animation. Nếu bạn có bất kỳ thắc mắc hoặc vấn đề về bản quyền, vui lòng để lại bình luận phía dưới. Chúc bạn học tập và làm việc hiệu quả. Xin chào và hẹn gặp lại!