Tutorial CSS3 Buat Butang Hidup / Mati yang Ramping
Menggunakan butang adalah, setakat ini, cara pilihan untuk berinteraksi dengan barangan elektronik; seperti radio, TV, pemain muzik, dan juga telefon pintar yang mempunyai ciri arahan suara masih memerlukan sekurang-kurangnya satu atau dua butang fizikal.
Tambahan pula, dalam era digital ini, yang butang telah berkembang dalam bentuk digital juga, yang menjadikannya lebih interaktif, dinamik dan mudah dibuat, berbanding dengan butang fizikal.
Jadi, kali ini, kita akan membuat butang licin dan interaktif yang berdasarkan reka bentuk yang sangat baik ini di Dribbble menggunakan CSS sahaja.
Nah, mari kita mulakan.
HTML
Kami akan memulakan butang dengan meletakkan markup berikut pada dokumen HTML kami. Ia benar-benar mudah, butang itu akan berdasarkan tag anchor, kami juga mempunyai span di sebelahnya untuk mewujudkan cahaya penunjuk, dan kemudian mereka dibungkus bersama dalam HTML5 seksyen tag.
& # xF011;
Inilah caranya kita mula kelihatan pada mulanya.
Styling Asas
Dalam bahagian ini, kami akan mula bekerja pada Gaya.
Kami mula-mula memohon latar belakang gelap ini dari Coretan Halus pada dokumen badan, dan memusatkannya seksyen. Kemudian, kami juga akan mengeluarkan titik-titik itu garis besar apabila : fokus dan : aktif pautan.
body background: url ('images / micro_carbon.png'); seksyen margin: 150px auto 0; lebar: 75px; ketinggian: 95px; kedudukan: relatif; teks-align: center; : aktif,: fokus outline: 0; Menggunakan Font Khas
Untuk ikon butang, kami akan menggunakan font khas dari Font Awesome dan bukan imej. Dengan cara itu ikon akan mudah gaya-mampu dan skala-mampu melalui stylesheet.
Muat turun fon, simpan fail fon (eot, woff, ttf dan svg) di dalam fon folder, dan kemudian letakkan kod berikut pada lembaran gaya anda untuk menentukan keluarga font baru.
@ font-face font-family: "FontAwesome"; src: url ("fon / fontawesome-webfont.eot"); format: url ("fon / fontawesome-webfont.woff") format ('woff'), url ("fon / fontawesome- format webfont.ttf ") format ('truetype'), url (" fon / fontawesome-webfont.svg # FontAwesome ") ('svg'); font-weight: normal; gaya fon: normal; 
The ikon kuasa yang kita perlukan untuk butang ini diwakili dalam nombor Unicode F011; jika anda melihat dengan teliti pada markup HTML di atas, kami telah meletakkan watak angka ini & # xF011; dalam tag anchor, tetapi sejak kita belum menentukan adat itu keluarga font dalam gaya butang, ikon masih belum diberikan dengan betul.
Bacaan lanjut: Unicode dan HTML: Aksara Dokumen
Styling the Button
Pertama sekali, kita perlu menentukan adat itu keluarga font untuk butang itu.
Butang kami akan menjadi bulatan, kami boleh mencapai kesan bulatan menggunakan jejari sempadan harta dan tetapkan nilai pada sekurang-kurangnya separuh daripada butang itu lebar.
Oleh kerana, kami menggunakan font untuk ikon, kami dapat dengan mudah menetapkan warna dan tambahkan bayang-bayang teks untuk ikon dalam lembaran gaya juga.
Seterusnya, kami juga akan mewujudkan kesan serong untuk butang itu. Kesan ini agak rumit. Pertama, kita perlu memohon warna latar belakang: rgb (83,87,93); untuk asas warna butang, maka kami menambah sehingga empat lapisan kotak-bayang-bayang.
a font-family: "FontAwesome"; warna: rgb (37,37,37); teks-bayangan: 0px 1px 1px rgba (250,250,250,0.1); saiz fon: 32pt; paparan: blok; kedudukan: relatif; teks-hiasan: tiada; warna latar belakang: rgb (83,87,93); kotak-bayang: 0px 3px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd Shadow * / inset 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * Shadow 3rd * / inset 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4 Shadow * / width: 70px; ketinggian: 70px; sempadan: 0; jejari sempadan: 35px; teks-align: center; garis ketinggian: 79px;
Terdapat juga bulatan yang lebih besar di bahagian luar butang dan kami akan menggunakannya : sebelum pseudo-element untuk itu bukannya menambah markup tambahan.
a: before content: ""; lebar: 80px; ketinggian: 80px; paparan: blok; z-indeks: -2; kedudukan: mutlak; warna latar belakang: rgb (26,27,29); kiri: -5px; atas: -2px; jejari jejari: 40px; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), inset 0px 1px 2px rgba (0, 0, 0, 0.5);
Bacaan lanjut: CSS: sebelum dan selepas unsur-unsur pseudo (Hongkiat.com)
Petunjuk Petunjuk
Di bawah butang, terdapat cahaya kecil untuk menunjuk status Kuasa Hidup dan Mati. Di bawah, kami menggunakan merah untuk warna cahaya kerana kuasa pada mulanya OFF, kami juga menambah kotak-bayang untuk meniru kesan cahaya cahaya.
a + span display: block; lebar: 8px; ketinggian: 8px; warna latar belakang: 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); jejari sempadan: 4px; jelas: kedua-duanya; kedudukan: mutlak; bawah: 0; kiri: 42%;
Kesannya
Pada ketika ini butang kami mula kelihatan baik dan kami hanya perlu menambah beberapa kesan di atasnya, contohnya, apabila butang 'sedang' diklik, kami mahu butang kelihatan seperti sedang ditekan dan ditekan.
Untuk mencapai kesan itu, yang pertama kotak-bayang dalam butang akan dilaraskan dan kedudukan akan diturunkan sedikit. Kita juga perlu menyesuaikan intensiti tiga bayang-bayang lain sedikit untuk menyesuaikan kedudukan butang.
a: active 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); / * 4 Shadow * / background-color: rgb (83,87,93); atas: 3px;
Selain itu, sebaik sahaja butang telah diklik, ia harus ditekan dan ikon harus 'bersinar' untuk menunjukkan bahawa kuasa adalah ON.
Untuk mencapai kesan sedemikian, kami akan menargetkan butang menggunakan : sasaran pseudo-class, kemudian ubah warna ikon ke putih dan tambah bayang-bayang teks dengan warna putih juga.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) , masukkan 0px -10px 35px 5px rgba (0, 0, 0, .5); warna latar belakang: rgb (83,87,93); atas: 3px; warna: #fff; teks-bayangan: 0px 0px 3px rgb (250,250,250);
Bacaan lanjut: Menggunakan: sasaran pseudo-class
Kami juga perlu menyesuaikan kotak-bayang dalam bulatan di luar butang, seperti berikut.
a: aktif: sebelum, a: sasaran: sebelum top: -5px; warna latar belakang: 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);
Penunjuk cahaya akan beralih dari warna lalai ke warna hijau untuk memberi penekanan bahawa kuasa telah dihidupkan.
a: target + span box-shadow: inset 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); warna latar belakang: rgb (135,187,83);
Kesan Peralihan
Terakhir, untuk membuat kesan butang berjalan dengan lancar, kami juga akan menggunakan kesan peralihan berikut.
Coretan ini di bawah akan secara khusus menambah peralihan kepada warna harta dan harta benda bayang-bayang teks untuk 350ms dalam unsur utama.
a transition: color 350ms, text-shadow 350ms; -o-peralihan: warna 350ms, teks-bayangan 350ms; -moz-peralihan: warna 350ms, teks-bayangan 350ms; -webkit-peralihan: warna 350ms, teks-bayangan 350ms;
Coretan kedua ini di bawah akan menambah peralihan untuk warna latar belakang dan kotak-bayang harta dalam penunjuk cahaya.
a: target + span transition: color-background 350ms, box-shadow 700ms; -o-peralihan: warna latar belakang 350ms, 700ms kotak-bayang; -moz-peralihan: warna latar belakang 350ms, 700ms kotak-bayang; -webkit-transition: 350ms warna latar belakang, 700ms kotak-bayang;
Keputusan akhir
Kami telah melalui semua gaya yang kami perlukan, kini anda dapat melihat keputusan akhir secara langsung serta memuat turun fail sumber dari pautan di bawah.
- Demo
- Muat turun Sumber
Bonus: Bagaimana untuk mematikannya
Di sini datang bonus. Sekiranya anda telah mencuba butang dari demo di atas, anda telah melihat bahawa butang itu hanya boleh diklik sekali sekali, itu adalah untuk menghidupkannya, jadi bagaimana kita mematikannya?.
Malangnya, kita perlu melakukannya dengan jQuery, tetapi ia juga sangat mudah. Berikut adalah semua kod jQuery yang kami perlukan.
$ (document) .ready (function () $ ('# button'). click (function () $ (this) .toggleClass ('on'););); Potongan di atas akan menambah kelas ON dalam jangkar, dan kami menggunakannya toggleClass fungsi dari jQuery untuk menambahnya. Oleh itu, apabila #button diklik, jQuery akan memeriksa sama ada kelas ON telah ditambah atau tidak: apabila tidak, jQuery akan menambah kelas, dan jika ia telah ditambah, jQuery akan mengeluarkan kelas.
Catatan: Jangan lupa untuk memasukkan pustaka jQuery.
Sekarang kita perlu mengubah Gaya sedikit. Hanya gantikan semua : sasaran pseudo-element dengan .pada pemilih kelas, seperti berikut:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), inset 0px 1px 1px 0px rgba (250, 250, 250, .2) , masukkan 0px -10px 35px 5px rgba (0, 0, 0, .5); warna latar belakang: rgb (83,87,93); atas: 3px; warna: #fff; teks-bayangan: 0px 0px 3px rgb (250,250,250); a: aktif: sebelumnya, a.on: sebelum top: -5px; warna latar belakang: 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,83,0.5); warna latar belakang: rgb (135,187,83);
Akhirnya, mari kita mencubanya di pelayar.
- Demo
- Muat turun Sumber
