Tutorial CSS3 Buat Tombol Nyala / Mati Sleek
Sejauh ini, menggunakan tombol adalah cara yang disukai untuk berinteraksi dengan barang elektronik; seperti radio, TV, pemutar musik, dan bahkan smartphone yang memiliki fitur perintah suara masih memerlukan setidaknya satu atau dua tombol fisik.
Selanjutnya, di era digital ini, the tombol telah berevolusi dalam bentuk digitalnya juga, yang membuatnya lebih interaktif, dinamis dan sangat mudah dibuat, dibandingkan dengan tombol fisik.
Jadi, kali ini, kita akan membuat tombol yang apik dan interaktif yang didasarkan pada desain luar biasa ini di Dribbble hanya menggunakan CSS.
Baiklah, mari kita mulai saja.
HTML
Kami akan memulai tombol dengan menempatkan markup berikut pada dokumen HTML kami. Ini sangat sederhana, tombol akan didasarkan pada tag jangkar, kami juga punya menjangkau di sebelahnya untuk membuat lampu indikator, dan kemudian mereka dibungkus bersama dalam HTML5 bagian menandai.
& # xF011;
Beginilah bentuk awalnya tombol kami.
Styling Dasar
Di bagian ini, kami akan mulai mengerjakan Gaya.
Kami pertama-tama menerapkan latar belakang gelap ini dari Pola Halus pada dokumen tubuh, dan pusatkan bagian. Kemudian, kami juga akan menghapus titik-titik garis besar atas :fokus dan :aktif link.
body background: url ('images / micro_carbon.png'); bagian margin: 150px auto 0; lebar: 75px; tinggi: 95px; posisi: relatif; perataan teks: tengah; : aktif,: fokus garis besar: 0; Menggunakan Font Kustom
Untuk ikon tombol, kita akan menggunakan font khusus dari Font Awesome daripada gambar. Dengan begitu ikon akan mudah bergaya dan mampu skala melalui stylesheet.
Unduh font, simpan file font (eot, woff, ttf dan svg) di font folder, dan kemudian tempatkan kode berikut pada stylesheet Anda untuk menentukan keluarga font baru.
@ font-face font-family: "FontAwesome"; src: url ("font / fontawesome-webfont.eot"); src: format url ("font / fontawesome-webfont.eot? #iefix") ('eot'), format url ("font / fontawesome-webfont.woff") ('woff'), url ("font / fontawesome- format webfont.ttf ") ('truetype'), url (" font / fontawesome-webfont.svg # FontAwesome ") ('svg'); font-weight: normal; font-style: normal; 
Itu ikon daya yang kita butuhkan untuk tombol ini diwakili dalam nomor Unicode F011; jika Anda melihat dekat pada markup HTML di atas, kami telah menempatkan karakter numerik ini & # xF011; dalam tag jangkar, tetapi karena kami belum menetapkan adat font-keluarga dalam gaya tombol, ikon belum dirender dengan benar.
Bacaan lebih lanjut: Unicode dan HTML: Karakter Dokumen
Menata Tombol
Pertama-tama, kita perlu mendefinisikan kebiasaan font-keluarga untuk tombol.
Tombol kami akan menjadi lingkaran, kami dapat mencapai efek lingkaran menggunakan batas-jari-jari properti dan atur nilainya setidaknya, setengah dari tombol lebar.
Karena, kami menggunakan font untuk ikon, kami dapat dengan mudah mengatur warna dan tambahkan bayangan teks untuk ikon di stylesheet juga.
Selanjutnya, kami juga akan membuat efek miring untuk tombol. Efek ini cukup rumit. Pertama, kita perlu mendaftar warna latar: rgb (83,87,93); untuk basis warna tombol, maka kita tambahkan hingga empat lapisan bayangan kotak.
a font-family: "FontAwesome"; warna: rgb (37,37,37); text-shadow: 0px 1px 1px rgba (250.250.250.0.1); ukuran font: 32pt; display: blok; posisi: relatif; teks-dekorasi: tidak ada; warna latar: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd Shadow * / inset 0px 1px 1px rpba (250) , 250, 250, .2), / * 3rd Shadow * / inset 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4th Shadow * / width: 70px; tinggi: 70px; perbatasan: 0; batas-radius: 35px; perataan teks: tengah; garis-tinggi: 79px;
Ada juga lingkaran yang lebih besar di bagian luar tombol dan kita akan menggunakan :sebelum elemen semu untuk itu daripada menambahkan markup tambahan.
a: before content: ""; lebar: 80px; tinggi: 80px; display: blok; z-index: -2; posisi: absolut; warna latar: rgb (26,27,29); kiri: -5px; atas: -2px; batas-jari-jari: 40px; box-shadow: 0px 1px 0px 0px rgba (250.250.250.0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5);
Bacaan lebih lanjut: CSS: sebelum dan: sesudah elemen semu (Hongkiat.com)
Lampu indikator
Di bawah tombol, ada cahaya kecil untuk menunjuk status Nyala dan Mati. Di bawah ini, kami menerapkan merah untuk warna cahaya karena daya awalnya MATI, kami juga menambahkan bayangan kotak untuk meniru efek kilau cahaya.
a + span display: block; lebar: 8px; tinggi: 8px; background-color: rgb (226,0,0); box-shadow: inset 0px 1px 0px 0px rgba (250.250.250.0,5), 0px 0px 3px 2px rgba (226,0.0.0.5); batas-jari-jari: 4px; jelas: keduanya; posisi: absolut; bawah: 0; kiri: 42%;
Efeknya
Pada titik ini tombol kita mulai terlihat bagus dan kita hanya perlu menambahkan beberapa efek padanya, misalnya, ketika tombolnya 'diklik', kita ingin tombol itu terlihat seperti ditekan dan ditekan.
Untuk mencapai efeknya, yang pertama bayangan kotak di tombol akan memusatkan perhatian dan posisi akan diturunkan sedikit. Kita juga perlu sedikit menyesuaikan intensitas tiga bayangan lainnya agar sesuai dengan posisi tombol.
a: aktif box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 3px 7px 0px rgb (17,17,17), / * 2nd Shadow * / inset 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3rd Shadow * / inset 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4th Shadow * / background-color: rgb (83,87,93); atas: 3px;
Selanjutnya, setelah tombol telah diklik, itu harus tetap ditekan dan ikon harus 'bersinar' untuk menunjukkan bahwa daya menyala.
Untuk mencapai efek seperti itu, kami akan menargetkan tombol menggunakan :target kelas semu, kemudian ubah warna ikon menjadi putih dan tambahkan bayangan teks dengan warna putih juga.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px rpb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) , inset 0px -10px 35px 5px rgba (0, 0, 0, .5); warna latar: rgb (83,87,93); atas: 3px; warna: #fff; text-shadow: 0px 0px 3px rgb (250.250.250);
Bacaan lebih lanjut: Menggunakan: target kelas semu
Kita juga perlu menyesuaikan bayangan kotak di lingkaran di luar tombol, sebagai berikut.
a: active: before, a: target: before top: -5px; warna latar: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250.250.250.0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5);
Indikator lampu akan berubah dari warna standar merah ke hijau untuk menekankan bahwa daya sudah menyala.
a: target + span box-shadow: inset 0px 1px 0px 0px rgba (250.250.250.0.5), 0px 0px 3px 2px rgba (135.187.783.0.5); warna latar: rgb (135.187.83);
Efek transisi
Terakhir, untuk membuat efek tombol berjalan dengan lancar, kami juga akan menerapkan efek transisi berikut.
Cuplikan di bawah ini akan secara khusus menambahkan transisi ke warna properti dan bayangan teks untuk 350 ms di elemen jangkar.
a transisi: warna 350ms, 350ms teks-bayangan; -o-transisi: warna 350ms, 350ms teks-bayangan; -moz-transisi: warna 350ms, text-shadow 350ms; -webkit-transisi: warna 350ms, text-shadow 350ms;
Cuplikan kedua di bawah ini akan menambahkan transisi untuk warna latar belakang dan bayangan kotak properti dalam indikator cahaya.
a: target + span transisi: warna latar 350ms, bayangan kotak 700ms; -o-transisi: 350ms warna latar belakang, 700ms kotak-bayangan; -moz-transisi: 350ms warna latar belakang, 700ms kotak-bayangan; -webkit-transisi: latar belakang-warna 350ms, kotak-bayangan 700ms;
Hasil akhir
Kami telah menemukan semua gaya yang kami butuhkan, sekarang Anda dapat melihat hasil akhir secara langsung serta mengunduh file sumber dari tautan di bawah ini.
- Demo
- Sumber Unduhan
Bonus: Cara mematikannya
Di sinilah bonusnya. Jika Anda telah mencoba tombol dari demo di atas, Anda telah memperhatikan bahwa tombol hanya dapat diklik sekali, itu untuk menyalakannya, jadi bagaimana kita mematikannya?.
Sayangnya, kita harus melakukannya dengan jQuery, tetapi sangat sederhana juga. Di bawah ini adalah semua kode jQuery yang kita butuhkan.
$ (document) .ready (function () $ ('# button'). klik (function () $ (this) .toggleClass ('on'););); Cuplikan di atas akan menambahkan kelas ON di jangkar, dan kami menggunakan toggleClass berfungsi dari jQuery untuk menambahkannya. Jadi, kapan #tombol diklik, jQuery akan memeriksa apakah kelas ON telah ditambahkan atau tidak: ketika tidak, jQuery akan menambahkan kelas, dan jika sudah ditambahkan, jQuery akan menghapus kelas.
catatan: Jangan lupa menyertakan perpustakaan jQuery.
Sekarang kita harus mengubah Style sedikit. Cukup ganti semua :target elemen semu dengan .di pemilih kelas, sebagai berikut:
a.on kotak-bayangan: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px rpb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) , inset 0px -10px 35px 5px rgba (0, 0, 0, .5); warna latar: rgb (83,87,93); atas: 3px; warna: #fff; text-shadow: 0px 0px 3px rgb (250.250.250); a: aktif: sebelumnya, a.on: sebelum top: -5px; warna latar: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250.250.250.0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5); a.on + span box-shadow: inset 0px 1px 0px 0px rgba (250.250.250,0.5), 0px 0px 3px 2px rgba (135.187.783,0.5); warna latar: rgb (135.187.83);
Akhirnya, mari kita coba di browser.
- Demo
- Sumber Unduhan
