Halo, jumpa lagi dengan saya 🙂 , Kali ini saya akan kasih tau kalian bagaimana Cara Membuat Flat Button Dengan CSS3, baik langsung saja kita praktikan, ikuti langkah-langkahnya berikut ini.
Seperti biasa, silahkan kalian buka teks editornya terlebih dahulu, kemudian salin kode HTML dibawah ini untuk membuat tampilan button.
1 |
<a href="#" class="button">Ooh, shiny!</a> |
Kalo sudah, lanjutkan lagi untuk kode CSS3 berikut untuk mempercantik tampilan button menjadi flat.
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 |
@import "bourbon"; $col-primary: #00c7ec; $corner-radius: 5px; body { background-color: #012839; text-align: center; padding-top: 50px; } .button { text-decoration: none; text-transform: uppercase; font-family: 'Exo 2', sans-serif; font-weight: 300; font-size: 30px; display: inline-block; position: relative; text-align: center; color: $col-primary; border: 1px solid $col-primary; border-radius: $corner-radius; line-height: 3em; padding-left: 5em; padding-right: 5em; box-shadow: 0 0 0 0 transparent; @include transition(all 0.2s ease-in); &:hover { color: white; box-shadow: 0 0 30px 0 transparentize($col-primary, 0.5); background-color: $col-primary; @include transition(all 0.2s ease-out); &:before { @include animation(shine 0.5s 0s linear); } } &:active { box-shadow: 0 0 0 0 transparent; @include transition(box-shadow 0.2s ease-in); } &:before { content: ''; display: block; width: 0px; height: 86%; position: absolute; top: 7%; left: 0%; opacity: 0; background: white; box-shadow: 0 0 15px 3px white; @include transform(skewX(-20deg)); } } @include keyframes(shine) { from { opacity: 0; left: 0%; } 50% { opacity: 1; } to { opacity: 0; left: 100%; } } |
Kalo sudah semua, jangan lupa disimpan, kemudian jalankan dibrowser, dan lihat hasilnya. Selesai
Cukup mudah bukan ? baik itulah tadi tutorial mengenai Cara Membuat Flat Button Dengan CSS3, semoga bermanfaat, amin.
Sampai ketemu di tutorial selanjutnya, selamat mencoba 🙂