Kami akan melihat setiap contoh dan melihat seperti apa struktur dan gaya HTML mereka untuk status tombol yang berbeda.
Harap perhatikan bahwa animasi/transisi hanya akan berfungsi di browser yang mendukung properti CSS3 ini.
Agar tidak mengotori kode dalam pelajaran, saya tidak akan menggunakan awalan untuk berbagai browser. Anda dapat melihatnya di arsip dengan contoh.
Contoh 1
Dalam contoh ini, kita akan membuat sebuah tombol besar dengan beberapa elemen di atasnya. Itu akan memiliki ikon, teks isi, panah di sisi kanan, dan harga yang hanya akan muncul saat kita mengarahkan kursor.
markup HTML
Strukturnya cukup sederhana: ikon gambar dan elemen lain dalam tag rentang:
Tersedia di Apple Toko aplikasi
css
Dalam gaya, kami memastikan transisi disetel dengan benar untuk elemen yang ingin kami animasikan saat melayang. Harganya tidak akan terlihat, atur opacity ke 0. Menerapkan banyak bayangan kotak akan memungkinkan kita membuat efek realistis:.a-btn( background: linear-gradient(top, #a9db80 0%,#96c56f 100%); padding-left: 90px; padding-right: 105px; height: 90px; display: inline-block; position: relative; border: 1px solid #80ab5d;box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); border-radius: 4px;float: kiri;hapus: keduanya; margin: 10px 0px; overflow: hidden; transition: box-shadow 0.3s ease-in-out; ) .a-btn img( position: absolute; left: 15px; top: 13px; border: none; transition: all 0.3s ease-in-out; ) .a-btn .a-btn-slide-text( position: absolute; font-size: 36px; top: 18px; left: 18px; color: #6d954e; opacity: 0; text-shadow : 0px 1px 1px rgba(255.255.255.0,4); transisi: opacity 0,2s kemudahan-keluar; ) .a-btn-teks( padding-top: 13px; tampilan: blok; ukuran font: 30px; bayangan teks: 0px -1px 1px #80ab5d; ) .a-btn-teks kecil( tampilan: blok; ukuran font: 11px; spasi huruf: 1px; ) .a-btn-ikon-kanan( posisi: absolut; kanan: 0px; atas: 0px;tinggi: 100%;lebar: 80px; border-left: 1px solid #80ab5d; kotak-bayangan: 1px 0px 1px rgba(255,255,255,0.4) sisipan; ) .a-btn-icon-right span( width: 38px; height: 38px; opacity: 0.7; border-radius: 20px; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px - 20px; batas: 1px solid rgba(0,0,0,0.5); latar belakang: #4e5c50 url(../images/arrow_down.png) pusat pusat tanpa pengulangan; bayangan kotak: 0px 1px 1px rgba(255,255,255,0,3 ) inset, 0px 1px 2px rgba(255,255,255,0.5); transisi: semua kemudahan keluar 0,3 detik; )
Saat Anda mengarahkan kursor ke tombol, kami akan mengubah bayangan, serta menampilkan harga dan menyembunyikan gambar:
.a-btn:hover( box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); ) .a-btn:hover img( transform: scale(10 ); opacity: 0; ) .a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-rentang kanan( opacity: 1; )
DI DALAM keadaan aktif buat tombol dapat diklik dengan menambahkan bayangan. Ikon panah di sebelah kanan akan diperbesar:
.a-btn:aktif ( position:relative; top:1px; background:#80ab5d; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #a9db80; ) .a- btn:aktif .a-btn-icon-rentang kanan( transform: scale(1.4); )
Contoh 2
Contoh kedua akan sangat mirip dengan yang pertama, hanya saja kita akan menambahkan beberapa efek baru.
markup HTML
Markup pada contoh ini akan sama seperti pada contoh pertama.css
Gayanya hampir sama dengan contoh pertama, kita hanya mengadaptasi warna. Tapi kami akan melakukan efek hover yang berbeda. Harga akan naik ke ukuran aslinya dan ikon akan hilang. Untuk panah, ubah warna latar belakang menjadi merah:.a-btn:hover( box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); ) .a-btn:hover img( opacity: 0; ) .a-btn:hover .a-btn-slide-text( opacity: 1; transform: scale(1); ) .a-btn:hover .a-btn-icon-rentang kanan( opacity: 1; background-color : #bc3532; )
Status aktif akan sama seperti pada contoh sebelumnya. Kami hanya akan mengubah warna. Saat kami mengklik tombol, kami juga akan memutar panah:
.a-btn:aktif ( posisi: relatif; atas: 1px; latar belakang: #5d81ab; bayangan kotak: 1px 1px 2px rgba(0,0,0,0.4) inset; warna batas: #80a9da;) .a- btn:aktif .a-btn-icon-rentang kanan( transform: rotate(360deg); )
Contoh 3
Dalam contoh ini, kami akan mencoba melakukan sesuatu yang sama sekali berbeda. Tombol akan melebar ke bawah saat mengarahkan kursor dan menampilkan pesan lain. Ikon panah akan berputar sedikit.
markup HTML
Markup pada contoh 3 akan sedikit berbeda dari pada contoh sebelumnya. Teks yang akan meluncur ke bawah akan berada dalam tag span dengan kelas "a-btn-slide-text":Daftar sekarang
css
Dalam keadaan normal, tombol akan memiliki ketinggian tertentu, kami akan menganimasikannya saat melayang untuk menampilkan pesan tambahan. Pesan tambahan "a-btn-slide-text" akan diposisikan secara absolut dan kita akan menambah tingginya dari 0px menjadi 30px saat melayang..a-btn( background: linear-gradient(top, #feda71 0%,#febb4a 100%); border: 1px solid #f5b74e; border-color: #f5b74e #e5a73e #d6982f; box-shadow: 0 1px 1px # d3d3d3, inset 0 1px 0 #fee395; bantalan: 0px 80px 0px 10px; tinggi: 38px; tampilan: blok-sebaris; posisi: relatif; radius batas: 4px; float: kiri; margin: 10px; luapan: tersembunyi; transisi: semua 0,3s linear; ) .a-btn-text( padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; color: #996633; text-shadow: 0 1px 0 #fedd9b; transisi: semua 0,3 detik linear; ); ukuran font: 13px; spasi putih: nowrap; font-family: Georgia, serif; gaya font: miring; teks-indent: 15px; overflow: tersembunyi; tinggi baris: 30px ; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;transisi: tinggi 0,3 detik linear; ) .a-btn-icon-right( posisi: mutlak; kanan: 0px; atas: 0px; tinggi: 100%; lebar: 52px; border-left: 1px solid #f5b74e; kotak-bayangan: 1px 0px 1px rgba(255,255,255,0.4) sisipan; ) .a-btn-icon-rentang kanan (lebar: 38px; tinggi: 38px; opacity: 0,7; posisi: absolut; kiri: 50%; atas: 50%; margin: -20px 0px 0px -20px; latar belakang: url transparan (../images/arrow_right.png) no-repeat 50% 55%; transition: all 0.3s linear; )
Saat melayang, kami akan mengubah ketinggian tombol dan teks tambahan. Kami juga akan memutar ikon panah 45 derajat:
.a-btn:hover( tinggi: 65px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); ) .a-btn:hover .a- btn-teks( teks-bayangan: 0px 1px 1px rgba(0,0,0,0.2); warna: #fff; ) .a-btn:hover .a-btn-slide-teks( tinggi: 30px; ) .a -btn:hover .a-btn-icon-rentang kanan( opacity: 1; transform: rotate(-45deg); )
Saat aktif, tombol akan bergerak sedikit dan berubah warna sehingga tombol akan tampak ditekan:
.a-btn:aktif ( position:relative; top:1px; background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */ border-color: #d29a3a #cc9436 #c89133; teks-bayangan: 0 1px 0 #fee1a0; bayangan kotak: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;)
Contoh 4
Dalam contoh 4, kami akan mendorong pesan tambahan, seperti pada contoh sebelumnya, tetapi kita akan melakukannya di sisi kanan sekarang. Ini akan terlihat seperti tombol membuka pesan di dalam dirinya sendiri.
markup HTML
Markup dalam contoh ini sama dengan yang sebelumnya.css
Gaya tombol akan serupa dengan contoh sebelumnya. Kami hanya akan mengubah warna dan posisi teks tambahan:.a-btn( background: linear-gradient(top, #80a9da 0%,#6f97c5 100%); padding-left: 20px; padding-right: 80px; height: 38px; display: inline-block; position: relative; perbatasan: 1px solid #5d81ab; bayangan kotak: 0px 1px 1px rgba(255,255,255,0,8) sisipan, 1px 1px 3px rgba(0,0,0,0,2), 0px 0px 0px 4px rgba(188,188,188,0,5); radius perbatasan : 20px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: all 0.3s linear; ) .a-btn-text( padding-top: 5px; display: block; font-size: 18px ; white-space: nowrap; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); color: #446388; transition: all 0.2s linear; ) .a-btn-slide-text( position:absolute; height: 100 %; atas: 0px; kanan: 52px; lebar: 0px; latar belakang: #63707e; teks-bayangan: 0px -1px 1px #363f49; warna: #fff; ukuran font: 18px; ruang putih: nowrap; transformasi teks : huruf besar; perataan teks: kiri; indentasi teks: 10px; luapan: tersembunyi; tinggi garis: 38px; bayangan kotak: -1px 0px 1px rgba(255,255,255,0,4), 1px 1px 2px rgba(0,0,0 ,0,2) sisipan; transisi: lebar 0,3 detik linier; ) .a-btn-icon-right( position: absolute; right: 0px; top: 0px; height: 100%; width: 52px; border-left: 1px solid #5d81ab; box-shadow: 1px 0px 1px rgba(255,255,255 ,0,4) inset; ) .a-btn-icon-rentang kanan( lebar: 38px; tinggi: 38px; opasitas: 0,7; posisi: absolut; kiri: 50%; atas: 50%; margin: -20px 0px 0px -20px ; background: transparent url(../images/arrow_right.png) no-repeat 50% 55%; transition: all 0.3s linear; )
Saat mengarahkan kursor, kami akan menambah padding tombol di sebelah kanan, serta lebar tag rentang dengan kelas "a-btn-slide-text":
.a-btn:hover( padding-right: 180px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); ) .a-btn:hover . a-btn-text( teks-bayangan: 0px 1px 1px #5d81ab; warna: #fff; ) .a-btn:hover .a-btn-slide-text( lebar: 100px; ) .a-btn:hover .a -btn-icon-rentang kanan ( opacity: 1; )
Dalam keadaan aktif, buat efek klik menggunakan bayangan:
.a-btn:aktif ( position: relative; top: 1px; background: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #80a9da; )
Contoh 5
Dalam contoh ini, kita akan menggunakan font karakter untuk ikon. Idenya adalah untuk membuat efek berikut: saat Anda mengarahkan mouse, ikon menghilang dan panah bergerak muncul.
markup HTML
Strukturnya akan terdiri dari 4 tag rentang di dalam tautan. Rentang dengan kelas "a-btn-slide-icon" akan menggerakkan panah, bergerak dari atas ke bawah.Z Unduh sekarang
css
Karena kita akan menggunakan font untuk menampilkan ikon di sisi kiri, kita perlu menyertakan font ini.Kami akan menyembunyikan panah dengan menyetel nilai teratasnya ke -30px.
@font-face ( font-family: "WebSymbolsRegular"; src: url("websymbols/websymbols-regular-webfont.eot"); src: url("websymbols/websymbols-regular-webfont.eot?#iefix") format ("Embedded-opentype"), url("websymbols/websymbols-regular-webfont.woff") format("woff"), url("websymbols/websymbols-regular-webfont.ttf") format("truetype"), url("websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular") format("svg"); font-weight: normal; font-style: normal; ) .a-btn( border-radius: 50px; padding: 10px 30px 10px 70px; posisi: relatif; float:kiri; tampilan: blok; luapan: tersembunyi; margin: 10px; latar belakang: gradien linier(atas, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%); box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); transisi: box-shadow 0.3s kemudahan dalam out; ) .a-btn-symbol( font-family: "WebSymbolsRegular", kursif; warna: #555; ukuran font: 20px; teks-bayangan: 1px 1px 2px rgba(255,255,255,0.5); posisi: absolut; kiri: 20px; garis-tinggi: 32px; transisi: opasitas 0,3 detik kemudahan keluar; ) .a-btn-text( font-size: 20px; color: #d7565b; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; teks -bayangan: 1px 1px 2px rgba(255,255,255,0.5); tampilan: blok; ) .a-btn-slide-text( font-family: Arial, sans-serif; ukuran font: 10px; spasi huruf: 1px; teks -transform: huruf besar;warna: #555;teks-bayangan: 0px 1px 1px rgba(255,255,255,0.9); ) .a-btn-slide-icon( posisi:absolut; atas:-30px; lebar: 22px; tinggi: 22px ; background: url transparan(../images/arrow_down_black.png) no-repeat top left; left:20px; opacity: 0.4; )
Saat melayang, kami akan menyembunyikan ikon di sebelah kiri dan memutar animasi untuk panah tanpa batas:
.a-btn:hover( background: #fff; box-shadow: 0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); ) .a-btn:hover .a -btn-symbol( opacity: 0; ) .a-btn:hover .a-btn-slide-icon( -webkit-animation: slideDown 0.9s linier tak terbatas; )
Saat tombol diklik, kita akan membuatnya menjadi merah dan membuat efek klik dengan menambahkan bayangan:
.a-btn:aktif( latar belakang: #d7565b; bayangan kotak: 0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); ) .a-btn:aktif . a-btn-text( warna: #fff; teks-bayangan: 0px 1px 1px rgba(0,0,0,0.3); ) .a-btn:aktif .a-btn-teks-slide( warna: rgba(0 ,0,0,0.4); teks-bayangan: tidak ada; )
Dan terakhir, animasi sederhana untuk menggerakkan panah dari atas ke bawah:
@keyframes slideDown ( 0% ( atas: -30px; ) 100% ( atas: 80px;) )
Contoh 6
Dalam contoh ini, kita akan membuat tombol bulat dengan tanda bintang di dalamnya. Kita akan membuat bintang berotasi saat melayang (dengan sedikit momentum) dan membuat beberapa teks tambahan muncul.
markup HTML
Kami akan memiliki tiga tag rentang di tombol tautan kami. Yang terakhir akan memiliki teks tersembunyi yang ditampilkan saat melayang.Daftar Gratis!
css
Kami akan sedikit bermain-main dengan anak ke-n dalam contoh ini. Karena kami memiliki 3 tag span, kami akan merujuknya seperti ini: .a-btn span:nth-child(1), .a-btn span:nth-child(2) dan .a-btn span:nth- child (3).Kita akan membuat tombolnya membulat dan menambahkan bayangan indah padanya. Untuk memusatkan teks isi secara vertikal, kita akan menyetel tampilan ke sel-tabel. Bintang dan teks tersembunyi akan diposisikan secara mutlak.
.a-btn( lebar: 120px; tinggi: 120px; radius batas: 50%; tampilan: blok; margin: 20px; float: kiri; latar belakang: #f0ad4e; posisi: relatif; bayangan kotak: 0px 0px 5px 0px rgba (246, 212, 163, 0,5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0,2) 0px 0px 0px 9px #fff; transisi: semua linier 0,3 detik; ) .a-btn span( tampilan: tabel -sel; lebar: 80px; tinggi: 80px; bantalan: 20px; perataan teks: tengah; perataan vertikal: tengah ; ukuran font: 26px; warna: #fff; bayangan teks: 0px 1px 1px #A03F16; font- keluarga: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif; transisi: semua linier 0,3 detik ; ) .a-btn span:nth-child(1), .a-btn span:nth-child (3)( posisi: absolut; atas: 0px; kiri: 0px; ukuran font: 40px; tinggi garis: 36px; opacity: 0; ) .a-btn span:nth-child(1)( latar belakang: url transparan (../images/star.png) pusat pusat tanpa pengulangan; opacity: 0.2; )
Saat mengarahkan kursor, kita akan mengubah bayangan tombol agar tampak terangkat. Teks tersembunyi akan terungkap dan kami akan menganimasikan teks awal. Kami juga akan menerapkan animasi rotasi untuk bintang:
.a-btn:hover( background: rgba(170, 77, 27, 0.6); box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77 , 27, 0.2) sisipan, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; ) .a-btn:hover span:nth-child(3 )( opacity: 1; ) .a-btn:hover span:nth-child(2)( transform: scale(0); opacity: 0; ) .a-btn:hover span:nth-child(1)( animasi : putar 1s linear; )
Sekarang mari buat tombol tampak ditekan saat Anda mengkliknya:
.a-btn:aktif( bayangan kotak: 0px 0px 5px 0px rgba(246, 212, 163, 0,5) sisipan, 0px -1px 5px 4px rgba(170, 77, 27, 0,2) sisipan, 0px 0px 0px 7px #fff , 0px -1px 0px 8px rgba(188, 188, 188, 0,3), 0px 0px 0px 10px #fff; ) .a-btn:rentang aktif:nth-child(2)( warna: rgba(170, 77, 27, 0.8); teks-bayangan: 0px 1px 1px rgba(255, 255, 255, 0.6); )
Animasi rotasi/riak terlihat seperti ini:
@-webkit-keyframes rotate( 0% ( transformasi: skala(1) putar(0);) 50% ( transformasi: skala(0,5) putar(180 derajat);) 100% ( transformasi: skala(1) putar(360 derajat) ;))
Contoh 7
Pada contoh terakhir, kita akan membuat tombol pseudo 3D menggunakan beberapa bayangan keren.
markup HTML
Strukturnya akan sama seperti pada contoh kelimacss
Gayanya juga akan sangat mirip dengan contoh 5, kita hanya akan mengubah beberapa warna dan bayangan:.a-btn( border-radius: 10px; padding: 10px 30px 10px 70px; posisi: relatif; float:kiri; tampilan: blok; luapan: tersembunyi; margin: 10px; latar belakang: linier-gradien(atas, #b7f2f4 0% ,#7ce7ea 100%); batas: 1px padat #90c6c8; warna batas: #90c6c8 #78bdc0 #65b6ba; bayangan kotak: 0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, 0 1px 0 rgba(255,255,255, 0.8) inset; transisi: semua 0.2s linear; ) .a-btn-symbol( font-family: "WebSymbolsRegular", kursif; warna: #437b7d; text-shadow: 0 1px 0 #bef3f5; font-size: 20px; posisi: absolut; kiri: 20px; lebar: 20px; text-align: center; line-height: 32px; transisi: semua 0,3 detik kemudahan-keluar; ) .a-btn-text( font-size: 20px; warna : #437b7d; text-shadow: 0 1px 0 #bef3f5; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; display: block; ) . a-btn-slide-text( font-family: Arial, sans-serif; ukuran font: 10px; spasi huruf: 1px; transformasi teks: huruf besar; warna: #555; bayangan teks: 0px 1px 1px rgba( 255.255.255.0.9); )
Saat mengarahkan kursor, kami akan memperbesar tombol dan memutar ikon kecil: tombol Tambahkan label
Selamat siang, para pembaca yang budiman. Pada hari ini kita akan membuat satu set ikon yang indah untuk situs menggunakan CSS3 dan animasi. Berkat tombol ini, Anda dapat mengubah tautan apa pun di halaman menjadi tombol animasi dengan tugas sederhana dari nama kelas. Secara umum, tidak ada yang rumit di sini pada pandangan pertama.
Sebagai pengingat, tombol-tombol ini gratis dan Anda bisa download Gratis. Pergi.
Tombol CSS3 animasi untuk situs web Anda
Sekarang beberapa kata tentang ukuran dan sudut bulat tombol:
/* Tiga ukuran tombol */ .button.big ( font-size:30px;) .button.medium ( font-size:18px;) .button.small ( font-size:13px;) /* Sudut tombol bulat */ .button.rounded( -moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em; )
Pada kode di atas, ada tiga kelas - ini adalah besar, sedang Dan kecil. Oleh karena itu, kami menetapkan nilai yang berbeda dalam piksel untuk setiap kelas. Semuanya terlihat jelas pada kode di atas.
Dan sekarang bagian yang paling menarik adalah warnanya. Di sini, pada prinsipnya, tidak ada yang rumit juga.
/* Blue button */ .blue.button( color:#0f4b6d !important; border:1px solid #84acc3 !important; /* Fallback background color */ background-color: #48b5f2; background-image: url("button_bg. png"), url("button_bg.png"), -moz-radial-gradient(tengah bawah, lingkaran, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(# 4fbbf7, #3faeeb); background-image: url("button_bg.png"), url("button_bg.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, dari (rgba(89.208.244,1)), ke(rgba(89.208.244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, dari(#4fbbf7), ke(#3faeeb)); ) .blue.button:hover( background-color:#63c7fe; background-image: url("button_bg.png"), url("button_bg.png"), -moz-radial-gradient(tengah bawah, lingkaran, rgba -moz-linear-gradient(#63c7fe, #58bef7); background-image: url("button_bg.png"), url("button_bg.png" ), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, dari(rgba(109.217.250,1)), ke(rgba(109.217.250,0))), -webkit-gradient(linear , 0% 0%, 0% 100%, dari(#63c7fe) , ke(#58bef7)); )
Itu saja untuk saat ini. Saya ingin memperingatkan Anda sebelumnya bahwa saat ini, tombol mungkin tidak berfungsi di beberapa browser, karena belum semuanya mendukung CSS3. Tapi menurut saya masalah ini akan segera teratasi.
Halo teman-teman. Hari ini saya akan memberi tahu Anda tentang dua cara yang akan membantu Anda membuat tombol animasi untuk situs Anda. Anda mungkin telah melihat banyak tombol ini dan mengkliknya. Jadi, di blog saya, saya secara berkala merekomendasikan kursus dan pelatihan mitra, hanya yang telah saya coba sendiri. Dan tentu saja saya tertarik dengan statistik, dan statistik mengatakan bahwa orang mengklik tombol menarik 48% lebih sering daripada tautan biasa.
Prinsip pembuatan tombol animasi di CSS adalah sebagai berikut, ada tiga ketentuan. 1 - Awal, 2 - saat mengarahkan kursor dan 3 - saat menekan tombol mouse. Beberapa layanan memiliki ketiga posisi tersebut, sementara yang lain hanya memiliki dua posisi. Tetapi yang utama adalah Anda puas dengan hasil akhirnya.
Video tutorial cara kedua membuat tombol animasi:
Sebagai contoh, pertimbangkan layanan CSS3 ButtonGenerator, yang hanya memiliki dua posisi. Tapi efeknya terlihat sangat bagus. Siapa yang bingung dengan kurangnya bahasa Rusia, gunakan generator terakhir yang diberikan dalam daftar.
Jadi ayo mulai.
Kita buka halaman rumah melayani. Awalnya, Anda akan melihat pratinjau tombol dan alat yang memungkinkan Anda membuat semua jenis pengaturan.
Bagian pertama Text&Font bertanggung jawab atas teks, ukuran font, warna font, bayangan font. Di sinilah Anda menulis label pada tombol, mengatur ukuran, warna, dan bayangannya.
Bagian selanjutnya, Latar Belakang, mengacu pada latar belakang. Di sini Anda dapat menentukan warna tombol, gradien tombol, ukuran tombol, dan pencampuran latar belakang.
Bagian Perbatasan bertanggung jawab untuk mengatur bayangan dan batas tombol. Anda dapat dengan mudah menyesuaikan ketebalan tepi, pembulatan sudut, dan bayangan tombol.
Bagian selanjutnya, Transform, bertanggung jawab atas transformasi tombol, yaitu rotasi, offset, dan distorsi.
Bagian selanjutnya, Transition, bertanggung jawab atas kelancaran animasi. Anda mengatur pengaturan ini sesuai dengan tombol Anda. Tindakan dapat diterapkan ke seluruh tombol atau ke masing-masing lapisan.
Setelah mencoba beberapa kali, bereksperimenlah dengan pengaturan dan Anda akan mengerti apa itu.
Setelah tampilan awal tombol dikonfigurasi, Anda dapat melanjutkan ke langkah berikutnya. Ini adalah modifikasi tombol saat mengarahkan kursor mouse. Untuk melakukan ini, klik kotak centang yang ditunjukkan pada tangkapan layar.
Opsi arahkan mouse
Sekarang semua perubahan dalam pengaturan yang Anda buat adalah untuk tombol yang akan ditampilkan saat Anda mengarahkan mouse. Dan pengaturan ini bergantung secara individual pada setiap tombol. Sebagai contoh, saya telah mengubah pengaturan warna rotasi, gradien, dan bayangan.
Saat tombol sudah siap, Anda dapat melanjutkan untuk menginstal tombol di artikel. Untuk melakukan ini, di tempat yang tepat dari artikel, instal kode:
Inilah contoh kami:
Nah, sekarang kamu sudah tahu cara mudah dan cepat membuat tombol animasi untuk website atau blog. Coba dan terapkan, itu sangat berharga. Jika Anda memiliki pertanyaan, tulis di komentar, saya akan mencoba membantu.
Itu saja untuk hari ini, saya berharap Anda beruntung. Dan saya selalu senang melihat di halaman blog saya.
P.S. Dan berikut adalah contoh tombol animasi untuk pelatihan Denis Gerasimov "Menyiapkan lalu lintas dingin untuk mempromosikan tautan afiliasi." Saya mengikuti pelatihan ini dan merekomendasikannya kepada semua orang - ini, tanpa berlebihan, adalah cara nyata untuk menghasilkan uang dari program afiliasi. Apa yang pada dasarnya saya lakukan.
Saya melempar sketsa ke sini saat saya melihat tombol Demo. Idenya di sini adalah sebagai berikut, untuk membuat tombol, seolah-olah, dari dua bagian, itu harus dianimasikan, saat melayang, bagian kedua akan terbuka, menarik keluar blok bagian dalam tempat tulisan itu berada, dan saat ini kursor dihapus, semuanya harus kembali ke posisi semula.
- Dalam pelajaran, kita akan menggunakan gaya utama sebagai:
- pseudo-element :sebelum , :setelah ;
- menggunakan posisi dengan blok posisi
- pseudo-classes :hover , :activ tentukan gaya pada hover dan klik mouse
- dan buat animasi halus dengan transisi, transformasi
Struktur Tombol HTML
Dengan sketsa di depan mata, Anda sudah bisa membayangkan bagaimana mengimplementasikannya di CSS. Kami membutuhkan blok utama tempat semua elemen tombol akan ditempatkan, ini akan menjadi pembungkusnya. Kemudian tombol tersebut akan memiliki bagian dalam yang akan bergerak keluar saat mouse tidak digerakkan, di dalamnya kita akan menempatkan teks "Lihat contoh". Kemudian muncul bagian kiri dan kanan tombol, di antaranya kami menempatkan elemen semu berbentuk segitiga. Dan saya hampir lupa, gambarnya berbentuk anak panah. Kita perlu menganimasikan semua ini, dan memberi tombol tekstur tertentu.
Kami membuka lingkungan pengembangan kami, dalam kasus saya, saya menggunakan phpstorm, buat index.html di dalamnya, tulis nama " CSS animasi tombol DEMO". Kami membuat
Div.dws-button>a>div.b-demo+div.b-teks+div.b-img
Klik terapkan dan struktur terbentuk.
Pada link beri tanda pagar (#) agar aktif. Ayo tulis nama tombolnya " Demo" , di blok tengah kami menunjukkan teks " Lihat contoh", dan di bagian bawah masukkan jalur ke gambar.
Kami membuat direktori tempat saya akan menyalin gambar, Anda dapat menempelkan gambar Anda atau mengunduh arsip dengan kode yang sudah jadi.
Tulis jalur ke gambar src="img/icon.png" , tentukan alt="button"
, на этом у нас каркас готов самой кнопки и можно переходить к оформлению стилей.!}
Menjelaskan Gaya CSS untuk Tombol
Langkah selanjutnya, mari kita buat css file style.css dan hubungkan ke halaman indeks. Kami segera menghubungkan font Cuprum yang populer, dan kami tidak memerlukan file indeks lagi.
Buka style.css , sambungkan gambar ke latar belakang, dan reset padding semua elemen di blok .dws-button.
Body( background-image: url("img/ep_naturalwhite.png"); ) .dws-button *( margin: 0; padding: 0; )
Kami mengatur gaya teks untuk tombol itu sendiri, mengatur lebarnya menjadi 250 piksel. dan tinggi 70 pic., berpusat di tengah layar dan menjorok dari atas sebesar 250 pic. Kemudian kami menetapkan batas 1 puncak. sehingga kita bisa melihat batas tombol saat dianimasikan saat diregangkan.
Dws-button( font-family: Cuprum, Arial, Verdana, sans-serif; width: 250px; height: 70px; margin: 250px auto; outline: 1px solid #faa21a; )
Kami menghapus garis bawah dari tautan dan memberinya warna abu-abu.
Dws-button a( dekorasi teks: tidak ada; warna: #2e2e30; )
Kemudian segera pilih blok dan beri mereka satu warna putih.
B-demo, .b-img( latar belakang: #ffffff; )
Selanjutnya, kami mendeskripsikan setiap blok secara terpisah, pilih kelas .b-demo dan atur lebar blok menjadi 105 piksel. Atur tinggi menggunakan line-height: 70px; , tengahkan teks dan tingkatkan font menjadi 30 gambar.. Jadikan sepenuhnya huruf kapital, dan padding mengatur padding kiri dan kanan.
B-demo( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: huruf besar; padding: 0 10px 0 15px; )
Pilih blok .b-text berikutnya, beri warna gelap, buat teks terang, atur ukurannya menjadi 24px, dan atur lebarnya menjadi 150px. dan dengan bantuan lekukan kami akan mengurangi ketinggian balok. Tengahkan teks dan atur padding.
B-teks( latar belakang: #3e3f3e; warna: #ffffff; ukuran font: 24px; lebar: 150px; tinggi garis: 20px; perataan teks: tengah; padding: 10px 0 10px 10px; )
Pilih blok yang tepat, atur lebarnya menjadi 45 puncak. tingginya juga 45 puncak. .padding akan memusatkan elemen gambar sedikit menggesernya ke kanan.
B-img( width:45px; line-height: 45px; padding: 20px 0 0 20px; )
Kemudian kami memposisikan elemen-elemen ini dalam kaitannya dengan blok dengan kelas .dws-button. Untuk melakukan ini, tetapkan kelas position: relative; dan bersarang semua blok position: absolute; .
Semua blok telah disesuaikan dengan induknya, dan sekarang mari kita bahas dan pusatkan.
Untuk kelas .b-demo, kita tentukan posisi awal dengan nol dari kiri dan atas dan tambahkan z-index:10; sehingga blok ini lebih tinggi dari yang lain.
.b-demo( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: huruf besar; padding: 0 10px 0 15px; kiri: 0; atas: 0; z-indeks: 10; )Blok dengan teks akan menjorok dari kiri dan dari atas sebanyak 5 puncak.
Dan blok dengan gambar .b-img diindentasi di sisi kiri sebesar 140 puncak. , dan setel ke 0 dari atas.Segera bulatkan sudut di sisi kanan menjadi 10 sekop.
.b-img( width:45px; line-height: 45px; padding: 20px 0 0 20px; kiri: 140px; atas: 0; border-radius: 0 10px 10px 0; )Dan kami akan melakukan hal yang sama dengan blok kiri.
.b-demo( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: huruf besar; padding: 0 10px 0 15px; kiri: 0; atas: 0; z- indeks: 10; border-radius: 10px 0 0 10px; )Kemudian kita perlu membuat dua elemen semu, ini adalah sudut yang terletak di sambungannya.
Pilih blok yang tepat dan berikan elemen pseudo :before , atur lebar dan tinggi ke nol, dan gambar segitiga menggunakan batas. Selanjutnya, kita perlu memposisikannya, untuk ini menambahkannya ke set kita.
Dan sejajarkan sedemikian rupa sehingga akan berdiri di ujung blok.
B-demo:sebelum( konten: ""; lebar: 0; tinggi: 0; batas atas: 35px padat transparan; batas kiri: 10px padat #ffffff; batas bawah: 35px padat transparan; atas: 0; kiri: 129px; )
Harap dicatat bahwa kami menyelaraskan semua blok ke kiri, dan bukan ke kanan, karena animasi akan bergerak dari kiri ke kanan dan ini adalah poin kuncinya.
Kemudian kami memilih blok berikutnya dengan gambar dan menetapkannya sebagai elemen pseudo :after. Kami menulis konten, lalu mengatur lebar dan tinggi ke nol dan menggambar segitiga menggunakan batas. Posisikan sepenuhnya, dan sejajarkan ke kiri.
.b-demo, .b-teks, .b-img, .b-demo: sebelumnya,.b-img:setelah( posisi: absolut; ) .b-img:setelah( konten: ""; lebar: 0; tinggi: 0; batas atas: 35px padat transparan; batas kiri: 10px padat #3e3f3e; batas -bawah: 35px padat transparan; atas: 0; kiri: 0; )Kami telah menyiapkan bingkai utama tombol, tetap menganimasikannya dan memberikan desain yang indah.
Animasi Tombol di CSS
Pada dasarnya, tombolnya sudah siap dan mari mulai menganimasikannya, saya akan menulis komentar, dari mana kita akan menulis gaya. Pertama-tama, kami menjelaskan tindakan saat mengarahkan kursor ke tombol.
/* Animation:hover */ .dws-button a:hover .b-demo( width: 50px; padding: 0 10px 0 10px; font-size: 20px; )
Kami akan segera menulis animasi gerakan halus ke semua blok, untuk ini kami memilih semuanya dan mengatur transisi untuk semua properti menjadi 0,5 detik.
Dws-button a:hover .b-demo, .dws-button a:hover .b-demo:before, .dws-button a:hover .b-text, .dws-button a:hover .b-img, . dws-button a:hover .b-img:after( transition:all 0.5s; )
Kami meresepkan gerakan dengan blok ini ke :before pseudo-element ke 69 puncak. ke kiri.
Dws-button a:hover .b-demo:before( left: 69px; )
Kami memindahkan bagian kedua tombol ke sisi kanan, menunjukkan bahwa saat melayang, geser blok sebanyak 185 puncak.
Tombol Dws a: arahkan .b-img( kiri: 185px; )
Kemudian blok dengan teks akan menjadi 50 sekop. dorong, pilih dan resepkan pergerakan blok.
Dws-button a:hover .b-text( kiri: 50px; )
Agar tombol tidak langsung runtuh setelah kita menghapus kursor, kita perlu mengatur transisi untuk elemen blok saat istirahat, kita akan membuat tombol menyusut dalam 1,5 detik lebih lambat.
.b-demo, .b-text, .b-img, .b-demo:sebelum, .b-img:setelah( posisi: mutlak; transisi: semua 1,5 detik; )Kemudian kita menganimasikan efek rotasi ikon menggunakan transformasi 360 derajat, pilih gambar dan tulis transform: rotate(360deg) ; dan juga atur opacity: 0,5; untuk membuat gambar sedikit lebih transparan.
Dws-button a:hover img( transform: rotate(360deg); opacity: 0.5; )
Jika kita mengarahkan kursor ke tombol sekarang, kita tidak akan melihat efek rotasi, karena kita perlu mengatur transisi ke gambar itu sendiri. Kami memilih dan meresepkan properti ini untuk itu.
B-img img( transisi: semua 1,5 detik; )
Tombol dengan efek ekstensi animasi sudah siap, Anda dapat menyembunyikan garis besarnya, Anda tidak memerlukannya lagi, dan mulai mendekorasinya.
Dws-button( font-family: Cuprum, Arial, Verdana, sans-serif; width: 250px; height: 70px; margin: 250px auto; /*outline: 1px solid #faa21a;*/ position: relative; )
Kami telah membuat tombol animasi lengkap dan sekarang Anda dapat memberikan tampilan yang lebih indah.
Penataan tombol di CSS
Setelah kami menyelesaikan semua pekerjaan pada properti, pemosisian, dan animasinya, kami akan melanjutkan ke desainnya. Mari ubah gaya umum tombol, tambahkan latar belakang ke blok, buat teks memiliki bayangan dan tambahkan :active pseudo-class yang akan berfungsi saat mouse diklik.
Pergi ke layanan tambahan di mana saya sudah menyiapkan preset dan saya hanya menyalin gaya untuk tombol, lalu saya mengganti yang sebelumnya dengan itu.
B-demo, .b-img( /* Permalink - gunakan untuk mengedit dan membagikan gradien ini: http://colorzilla.com/gradient-editor/#f22404+13,8e0b00+65,6d0019+100 */ background: # f22404; /* Browser lama */ background: -moz-linear-gradient(-45deg, #f22404 13%, #8e0b00 65%, #6d0019 100%); /* FF3.6-15 */ background: -webkit- linear-gradient(-45deg, #f22404 13%,#8e0b00 65%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #f22404 13%,# 8e0b00 65%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType =1); /* fallback IE6-9 pada gradien horizontal */ )
Untuk elemen semu, tambahkan warna merah ke latar belakang bahan kancing.
.b-demo:sebelum( isi: ""; lebar: 0; tinggi: 0; border-top: 35px solid transparan; border-left: 10px solid#7B040E; border-bottom: 35px padat transparan; atas: 0; kiri: 129px; )Mari ubah warna tautan dari gelap menjadi putih.
Dws-button a( dekorasi teks: tidak ada; warna: #ffffff; )
Mari beri bayangan pada teks, untuk ini kita akan menambahkan di kelas .b-demo teks-bayangan: -1px -1px 1px #000000;
.b-demo( width:105px; line-height: 70px; text-align: center; font-size: 30px; text-transform: huruf besar; padding: 0 10px 0 15px; kiri: 0; atas: 0; z- indeks: 10;batas-radius: 10px 0 0 10px; teks-bayangan: -1px -1px 1px #000000; )Saya akan membuat blok bagian dalam dengan warna kebiruan.
.b-text( /* Permalink - gunakan untuk mengedit dan membagikan gradien ini: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50;Custom+2 */ background: #b3dced; /* Browser lama */ background: -moz-linear-gradient(45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #b3dced 0% ,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+ , Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 fallback pada gradien horizontal */ warna: #ffffff; ukuran font: 24px; lebar: 150px garis-tinggi: 20px; perataan teks: tengah; padding: 10px 0 10px 10px; kiri: 5px; atas: 5px; )Segera ubah warna :after pseudo-element
Ayo ganti gambarnya, atur yang hitam jadi putih, di awal pelajaran saya upload dua di antaranya, kita resepkan icon yang kedua.
Dan tahap terakhir, kita akan menjelaskan style saat mouse diklik
Saya akan menulis komentar yang sesuai di sini, lalu di bawahnya kami memilih dua blok dengan pseudo-class :active , kami mengatur bahan hanya terbalik.
/* Animation:active */ .dws-button a:active .b-demo, .dws-button a:active .b-img( /* Permalink - gunakan untuk mengedit dan membagikan gradien ini: http://colorzilla.com /gradient-editor/#f22404+13,8e0b00+49,6d0019+70 */ background: #f22404; /* Browser lama */ background: -moz-linear-gradient(45deg, #f22404 13%, #8e0b00 49% , #6d0019 70%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* Chrome10-25,Safari5 .1-6 */ background: linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform .Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType=1); /* fallback IE6-9 pada gradien horizontal */ )
Untuk blok di latar belakang, kita akan membuat gradien dalam gaya ini hanya dicerminkan dan menambahkan efek bayangan.
Dws-button a:active .b-text( /* Permalink - gunakan untuk mengedit dan membagikan gradien ini: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50 */ background: #b3dced; /* Browser lama */ background: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+ , Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 fallback pada gradien horizontal */ box- bayangan: 0 0 3px 1px #82DCFF; )
Sebagai gaya terakhir, saat mengklik, kami akan menulis rotasi ikon ke arah yang berlawanan dengan manifestasi penuhnya.
Dws-button a: img aktif( transform: rotate(0deg); opacity: 1; )
Ternyata itu adalah tombol yang cukup efektif, yang dapat dengan mudah dimodifikasi dan dirancang agar sesuai dengan tugas Anda. Saya merekomendasikan untuk mengganti desain umumnya, membuat preset Anda sendiri, bereksperimen dengan opsi gradien yang berbeda, mungkin Anda akan menemukan metode animasi yang lebih orisinal dan pastikan untuk membagikannya di komentar.
Siapa pun yang menyukai materi tersebut, pastikan untuk membaginya dengan teman-teman Anda.
- Terjemahan
Halo, habradrug sayang! Hari ini kita akan belajar cara membuat tombol CSS3 3D! Mereka didasarkan pada freebie PSD populer oleh Orman Clark untuk situs web Premium Pixels-nya. Kami akan mencoba membuat salinan tombol-tombol ini menggunakan CSS dengan kode HTML minimum.
Langkah 1: Membuat Dokumen HTML
Kita akan mulai dengan membuat dokumen HTML baru. Ini akan didasarkan pada boilerplate HTML5 sehingga kita memiliki titik awal yang baik. Sekarang kami akan menambahkan daftar dengan tautan. Pada dasarnya itu saja, terima kasih kepada CSS3 karena kita tidak perlu menggunakan div dan span tambahan.Kami akan menetapkan 'tombol' kelas untuk setiap item daftar. Dan karena Orman menggunakan warna yang berbeda, kami akan menetapkan warna yang berbeda untuk setiap tombol. warna sendiri sebagai sebuah kelas.
Itu saja yang kita butuhkan pada tahap ini.
Langkah 2: Aturan dasar CSS
Sebelum Anda masuk ke gradien, sudut membulat, dll., Anda harus memperhatikan aturan dasar. Tidak ada yang istimewa, CSS2 biasa:Ul ( gaya daftar: tidak ada; ) a.tombol ( tampilan: blok; float: kiri; posisi: relatif; tinggi: 25px; lebar: 80px; margin: 0 10px 18px 0; dekorasi teks: tidak ada; font: 12px " Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; )
Sekarang terapkan aturan untuk warna berbeda. Misalnya, untuk abu-abu. Semua warna lain dapat dilihat di demo.
/* GREY */ .gray, .gray:hover ( color: #555; border-bottom: 4px solid #b2b1b1; background: #eee; .gray:hover ( background: #e2e2e2; ) )
Anda harus berakhir dengan sesuatu seperti ini. Terlihat cukup kokoh, jika tahun 2008 di halaman. 
Langkah 3: Bingkai ganda!
Jika Anda mencermati hasil akhirnya, Anda akan melihat ada garis tipis di sekeliling seluruh tombol. Untuk mencapai efek ini, kami akan menggunakan elemen semu :sebelum Dan :setelah.a.button (tampilan: blok; float: kiri; posisi: relatif; tinggi: 25px; lebar: 80px; margin: 0 10px 18px 0; dekorasi teks: tidak ada; font: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; font-weight: bold; line-height: 25px; text-align: center; ) a.button:before, a.button:after ( content: ""; position: absolute; left: -1px; height: 25px; lebar: 80px; bawah: -1px; ) a.button:before ( tinggi: 23px; bawah: -4px; border-top: 0; )
Menambahkan warna membuat tombol terlihat jauh lebih baik.
/* GREY */ .gray, .gray:hover ( color: #555; border-bottom: 4px solid #b2b1b1; background: #eee; ) .gray:before, .gray:after ( border: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; ) .gray:hover ( background: #e2e2e2; )
Langkah 4: Sedikit keajaiban CSS3
Sekarang mari kita langsung ke bagian CSS3. Mari kita mulai dengan sudut membulat:a.button (tampilan: blok; float: kiri; posisi: relatif; tinggi: 25px; lebar: 80px; margin: 0 10px 18px 0; dekorasi teks: tidak ada; font: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; font-weight: bold; line-height: 25px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; )
elemen alam :sebelum Dan :setelah juga membutuhkan sudut yang membulat.
a.button: sebelum, a.button: setelah ( konten: ""; posisi: mutlak; kiri: -1px; tinggi: 25px; lebar: 80px; bawah: -1px; -webkit-border-radius: 3px; -moz -border-radius: 3px; border-radius: 3px; ) a.button:before ( tinggi: 23px; bawah: -4px; border-top: 0; -webkit-border-radius: 0 0 3px 3px; -moz- border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-box-shadow: 0 1px 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0px #bfbfbf; box-shadow: 0 1px 1px 0px #bfbfbf; )
Terakhir, kita akan menerapkan gradien, bayangan dalam, dan bayangan pada teks. Untuk menghindari bug di IE6, tambahkan status: dikunjungi.
/* GREY */ a.gray, a.gray:hover, a.gray:visited ( color: #555; border-bottom: 4px solid #b2b1b1; text-shadow: 0px 1px 0px #fafafa; background: #eee; latar belakang: -webkit-gradien(linear, kiri atas, kiri bawah, dari(#eee), ke(#e2e2e2)); latar belakang: -moz-linear-gradient(atas, #eee, #e2e2e2); box-shadow: inset 1px 1px 0 #f5f5f5; ) .gray:before, .gray:after ( border: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; ) .gray:hover ( background: #e2e2e2; background: -webkit- gradien(linear, kiri atas, kiri bawah, dari(#e2e2e2), ke(#eee)); latar belakang: -moz-linear-gradient(atas, #e2e2e2, #eee); )
Hasil akhir kami, tidak terlalu buruk!
Langkah 5: Apakah kita lupa sesuatu?
Dalam desainnya, Orman juga menyediakan negara: aktif. Oleh karena itu, kita harus menambahkannya ke kode kita.Kami akan menempatkan bagian kode ini di bawah aturan untuk warna yang berbeda.
/* STATUS AKTIF */ a.button:aktif ( border: none; bottom: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3); ) a.button:aktif:sebelum, a.button:aktif:setelah ( batas: tidak ada; - webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; )
Inilah yang akan kita dapatkan:
Langkah 6 (opsional): Browser lama
Jadi kami telah membuat tombol CSS3 yang bagus yang berfungsi di semua browser modern. Tapi bagaimana dengan Internet Explorer 8 dan di bawah. Browser ini tidak mendukung bayangan atau gradien teks.Untuk mengatasi masalah ini, kita dapat menggunakan library javascript Modernizr, yang dapat mendeteksi jika browser Anda mendukung CSS3 dan HTML5. Pustaka tidak memperbaiki masalah, hanya menawarkan gaya alternatif.
Pertama, kita akan membuat versi Modernizr kita sendiri sehingga kita tidak perlu membawa sejumlah besar javascript bersama kita. Ini dapat dilakukan di situs web mereka. Setelah kami memasukkan javascript ke dalam dokumen kami, kami perlu menentukan aturan kelas yang berbeda untuk gaya alternatif. Kami akan menggunakan gambar untuk browser yang tidak mendukung radius batas dan gradien.
/* FALLBACK MODERNIZR */ .no-cssgradients a.button, .no-cssgradients a.button: visited, .no-borderradius a.button, .no-borderradius a.button: visited, .no-generatedcontent a.button, .no-generatedcontent a.button:visited ( background: url(images/sprite.png) no-repeat 0 0px; height: 32px; width: 82px; ) .no-cssgradients a.button:hover, .no-borderradius a .button:hover, .no-generatedcontent a.button:hover ( background: url(images/sprite.png) no-repeat 0 -32px; ) .no-cssgradients a.button:aktif, .no-borderradius a.button :aktif, .no-generatedcontent a.button:aktif ( background: url(images/sprite.png) no-repeat 0 -64px; bottom: 0; line-height: 35px; ) .no-cssgradients a.gray, . no-cssgradients a.gray: visited, .no-cssgradients a.gray:hover ( background-position-x: 0; ) .no-cssgradients a.pink, .no-cssgradients a.pink: visited, .no-cssgradients a.pink:hover ( background-position-x: -82px; ) .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover ( background-position-x: -164px; ) .no-cssgradients a.green, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover ( background-position-x: -246px; ) .no-cssgradients a.turquoise, .no- cssgradients a.turquoise:mengunjungi, .no-cssgradients a.turquoise:hover ( background-position-x: -328px; ) .no-cssgradients a.black, .no-cssgradients a.black:mengunjungi, .no-cssgradients a .black:hover ( background-position-x: -410px; ) .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.darkgray:hover ( background-position-x: - 492px; ) .no-cssgradients a.yellow, .no-cssgradients a.yellow:visited, .no-cssgradients a.yellow:hover ( background-position-x: -574px; ) .no-cssgradients a.purple, . no-cssgradients a.purple:visited, .no-cssgradients a.purple:hover ( background-position-x: -656px; ) .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no- cssgradients a.darkblue:hover ( background-position-x: -738px; ) .button:before, .no-cssgradients a.button:after, .no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button:sebelum, .no-borderradius a.button:setelah, .no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no -generatedcontent a.button:hover, .no-generatedcontent a.button:before , .no-generatedcontent a.button:after ( border: 0; )
