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

Button với hiệu ứng chuyển động Animation

CSS Animation là gì?

Hướng dẫn tạo button

• Copy toàn bộ code dưới đây:

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

• Dán toàn bộ code đã copy phía trên vào trước thẻ đóng </body>
• Lưu lại!

Mẫu và hướng dẫn sử dụng button

<center><button class="codepro-custom-btn codepro-btn-1" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Read More</button></center>

<center><button class="codepro-custom-btn codepro-btn-2" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Read More</button></center>

<center><button class="codepro-custom-btn codepro-btn-3" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>Read More</span></button></center>

<center><button class="codepro-custom-btn codepro-btn-4" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>Read More</span></button></center>

<center><button class="codepro-custom-btn codepro-btn-5" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>Read More</span></button></center>

<center><button class="codepro-custom-btn codepro-btn-6" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>Read More</span></button></center>

<center><button class="codepro-custom-btn codepro-btn-7" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>Read More</span></button></center>

<center><button class="codepro-custom-btn codepro-btn-8" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>Read More</span></button></center>

<center><button class="codepro-custom-btn codepro-btn-9" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Read More</button></center>

<center><button class="codepro-custom-btn codepro-btn-10" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Read More</button></center>

<center><button class="codepro-custom-btn codepro-btn-11" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Read More</button></center>

<center><button class="codepro-custom-btn codepro-btn-12" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')"><span>Click!</span><span>Read More</span></button></center>

<center><button class="codepro-custom-btn codepro-btn-13" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Read More</button></center>

<center><button class="codepro-custom-btn codepro-btn-14" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Read More</button></center>

<center><button class="codepro-custom-btn codepro-btn-15" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Read More</button></center>

<center><button class="codepro-custom-btn codepro-btn-16" target="blank" title="Code Pro" onclick="window.open('https://www.code.pro.vn/')">Read More</button></center>

Lời kết