CSS Animation Là Gì?

CSS Animation là một kỹ thuật trong lập trình web sử dụng CSS để tạo ra hiệu ứng hoạt hình trên các phần tử HTML mà không cần sử dụng JavaScript.

Các Bước Thực Hiện

  • Bước 1 : Đăng nhập vào trang quản trị của Blogger
  • Bước 2 : Vào phần chủ đề → chỉnh sửa HTML
  • Bước 3 : Sao chép toàn bộ đoạn CSS bên dưới và dán vào bên trên của thẻ đóng </body>

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

Mẫu Và Cách Sử Dụng

Bên dưới là 16 mẫu Button chuyển động Animation cho bạn tham khảo:


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


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


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


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


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


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


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


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


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


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


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


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


<center><button class="aetrickblog-custom-btn aetrickblog-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

Cảm ơn bạn đã lựa chọn aetrick.net thay vì hàng triệu website khác ngoài kia!

Blog, Code, Thủ Thuật Website

Tagged in:

, , , , , , , ,