Salam hangat teman-teman, semoga sehat selalu ya. Pada kesempatan kali ini saya akan mencoba berbagi tips bagaimana Cara Membuat Animasi Button Previous dan Next Yang Menarik.
Seringkali teman-teman ingin menambahkan efek animasi pada website yang teman-teman buat supaya lebih menarik. Seperti memberi efek animasi pada saat teman-teman mengklik previous tombol atau next tombol.
Ok, langsung saja saya kasih tau Cara Membuat Animasi Button Previous dan Next Yang Menarik:
– Pertama ketikan codingan di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="six col"> <a href="#" class="button" id="button-1">Prev</a> </div> <div class="six col"> <a href="#" class="button" id="button-2">Next</a> </div> </div> </body> </html> |
– Kedua ketikan codingan css di berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
html, body{ width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; } a{ text-decoration: none; } /* GRID */ .six { width: 25.2%;} /* COLUMNS */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-of-type { margin-left: 0; } .container{ width: 100%; max-width: 600px; margin: 0 auto; position: relative; text-align: center; overflow: hidden; } /* ALL BUTTONS */ .button{ display: inline-block; padding: 20px 50px; margin: 20px 0; position: relative; color: #3b3e3f; } .button:hover{ color: black; border-top:3px solid black; border-bottom:3px solid black; } /* BUTTON 1 */ #button-1{ background-color: #7aaee1; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #button-1:before{ content: ""; position: absolute; top: calc(50% - 15px); left: 0; border-right: 15px solid #7aaee1; border-top: 15px solid transparent; border-bottom: 15px solid transparent; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #button-1:hover{ -webkit-transform: translateX(15px); -ms-transform: translateX(15px); -o-transform: translateX(15px); transform: translateX(15px); } #button-1:hover:before{ left: -16px; } /* BUTTON 2 */ #button-2{ background-color: #7aaee1; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #button-2:after{ content: ""; position: absolute; top: calc(50% - 15px); right: 0; border-left: 15px solid #7aaee1; border-top: 15px solid transparent; border-bottom: 15px solid transparent; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #button-2:hover{ -webkit-transform: translateX(-15px); -ms-transform: translateX(-15px); -o-transform: translateX(-15px); transform: translateX(-15px); } #button-2:hover:after{ right: -16px; } |
– Ketiga teman-teman jangan lupa ketik tag link untuk memanggil file css-nya
|
1 |
<link rel="stylesheet" type="text/css" href="style.css"> |
Ok, sekarang kita lihat hasilnya yah teman-teman:
Sekian tips dari saya kali ini tentang Cara Membuat Animasi Button Previous dan Next Yang Menarik.
Selamat mencoba dan tetap jaga kesehatan selalu yah teman-teman.