Tombol CSS. Manfaat. Styles. estetika

Mungkin ada satu situs bukan tanpa referensial untuk halaman tombol lainnya. Semua orang ingin membawa ke perhatian Anda situs, dan pada saat yang sama menggunakan berbagai cara. Dalam desain web antaranya meliputi desain tombol, yang berbeda menurut parameter yang berbeda - baik dalam ukuran dan bentuk, dan efek dan sebagainya.

Tombol CSS yang paling nyaman. Untuk saat ini mereka benar-benar dapat mengubah gaya. Dan, tentu saja, memberikan kesempatan tambahan untuk desain situs secara keseluruhan.

Sebagai permulaan, untuk menghindari kebingungan dan kesalahpahaman, perlu untuk memahami beberapa konsep.

CSS, yang merupakan

CSS, yang berarti dalam terjemahan "Cascading Style Sheets", saat ini salah satu teknologi utama di Internet. Tanpa bahasa ini tidak mungkin untuk biaya setidaknya satu situs.

CSS-kode - panduan untuk browser yang berisi informasi seperti elemen tampilan di halaman dan di mana untuk melakukannya.

Mudah untuk menyimpan instruksi ini dalam file terpisah dengan css ekstensi. Di sisi lain, mereka dapat ditempatkan pada awal html-dokumen.

Tombol di situs. Apa itu

Tombol, atau grafis untuk navigasi situs harus menarik perhatian pengunjung untuk melihat bahwa dia menyembunyikan informasi yang diperlukan, dan di samping itu, akan ingin klik. Ketika itu cukup cerah dan menonjol, itu akan mendapatkan perhatian. Tombol ini dapat menarik pengunjung, misalnya, meninggalkan komentar di situs, atau mengirim permintaan untuk berlangganan newsletter yang menarik, dan, tentu saja, hanya mentransfer bagian pengguna diminta dari situs.

Tombol yang statis, animasi, dinamis, suara dan tanpa itu.

Mereka dapat diciptakan secara khusus, misalnya, di Photoshop, dan meng-upload gambar ke situs, dan dapat dengan mudah dan cepat datang dengan mereka dalam CSS.

tombol CSS

Membuat tombol ini sangat mudah. Keuntungan besar dari penggunaannya adalah bahwa mereka setiap saat, hanya beberapa detik, Anda dapat mengubah luar pengakuan.

Seperti kita ketahui, ada tiga poin kunci:

• beristirahat ketika tidak melakukan apa-apa dengan hal itu, sebagai hanya browsing halaman;
• posisi hover kursor di atasnya;
• dan mengaktifkan saat diklik.

Tombol-tombol penuh akurat ditampilkan dalam browser seperti Firefox, Safari, Opera, Chrome. Pada saat yang sama di Internet Explorer 9, tombol tidak akan ditampilkan secara penuh. Sebagai contoh, putaran sudut, teks shadow dan stroke sekitar tombol tidak akan terlihat di sini karena fakta bahwa sifat ini tidak didukung oleh browser ini. Namun, secara umum, CSS-tombol untuk situs terlihat baik dalam versi browser. Di Internet Explorer 8 dan versi lainnya di bawah kedelapan di tombol tidak akan Volume terlihat, tetapi pada saat yang sama, untuk menjaga penampilan gradien.

Jika kita membandingkan tombol dalam bentuk gambar dan tombol CSS, perbedaannya adalah ruang pada server akan benar-benar tidak relevan. Tapi tombol CSS akan mengurangi jumlah permintaan ke server, tetapi akan menjadi keuntungan yang jelas dibandingkan dengan tombol sebagai gambar.

Ternyata bahwa bahkan jika dukungan dari beberapa properti CSS di Internet Explorer dan tidak ada, tombol ini akan tetap terlihat lebih unggul dari gambar sederhana, karena satu-satunya yang akan kehilangan pengguna di Internet Exporer, sehingga untuk melihatnya estetika teknologi modern di Web -Desain. Tapi itu adalah cacat cukup material.

Untuk setiap posisi diberikan gaya sendiri. gaya ini ditulis dalam sebuah file css khusus atau antara tag kepala di sangat halaman.

Menempatkan tombol di website

Antara kode tag body tertulis:

dimana

id = "button2" di sini adalah nama ditugaskan untuk tombol,

href = http: // situs / tulisan / 175.988 /% E2% 80% 9D% D0% 93% D0% 98% D0% 9F% D0% 95% D0% A0% D0% A1% D0% A1% D0% AB % D0% 9B% D0% 9A% D0% 90% E2% 80% 9D diberikan link langsung ke dokumen yang diinginkan,

TEKS - teks tercetak yang akan ditampilkan pada tombol.

Gaya untuk tombol

1. tombol CSS Style dicatat secara terpisah dalam dokumen atau di halaman itu sendiri:

2. Pertama tombol CSS ditulis ketika mereka beristirahat:

3. parameter Selanjutnya dicatat, sesuai dengan tombol ketika kursor menyarankan itu. Jika dalam kasus ini, hanya perubahan warna dan shading, dan gaya, semuanya tetap sama, kecuali untuk warna dan shading:

4. Dan opsi terakhir adalah posisi tombol ditekan kursor di atasnya. Sering dalam kasus tersebut hanya perubahan minimum, seperti warna, seperti dalam kasus ini:

CSS - tombol yang indah

Untuk membuat gradien, Anda dapat menggunakan tombol. Cara terbaik adalah untuk pertama menarik tombol di editor gambar, seperti Photoshop, sehingga Anda tahu persis apa yang terjadi pada akhirnya. Jika Anda menggunakan Photoshop, maka awalnya sudah memiliki beberapa gradien, tetapi di samping itu, Anda dapat men-download lebih dan lebih, jenis yang ingin mendapatkan di situs.

Bereksperimen dengan CSS-kode dan mengubah berbagai parameter, adalah mungkin untuk mengubah tombol CSS indah, dan dengan seleksi, untuk mencapai hasil yang diinginkan.

parameter ini adalah:

- warna teks pada tombol;

- ukuran teks dan tombol;

- tombol warna gradien;

- tombol sudut radius;

- dan warna stroke nya.

Sebenarnya, Anda dapat dengan aman, tanpa rasa takut, untuk bereksperimen dan memilih pilihan terbaik. Meskipun jumlah parameter, Anda dapat membuat sangat beragam di tombol gaya mereka.