Belajar Css: Cara Menciptakan Tombol Download Dan Icon Awesome
- sebelumnya aku akan jelaskan singkat apa itu CSS. CSS yaitu salah satu bahasa code yang dipakai untuk menciptakan tampilan website menarik "desain website". Dengan CSS tampilan website akan lebih menarik dan indah. CSS kalau di ibaratkan mirip objek rumah, maka CSS didalam rumah yaitu mirip Cat tembok, cat bangku, cat meja, list pintu, list pagar, list jendela, bentuk rumah yang elegan, dan lain sebagainya. Begitu juga CSS didalam website, mirip warna tombol, list tombol, warna background, desain hidangan navigasi, desain body, tata letak widget, dan lain sebagainnya.
Baca juga artikel sebelumnya: Belajar CSS Dasar
Belajar CSS Cara Membuat Tombol Download Dengan CSS
Tombol Download yaitu tombol atau link daerah untuk mendownload suatu file. Untuk menciptakan tombol tersebut alangkah baiknya kalau dibentuk semenarik mungkin. Nah dibawah ini akan aku buatkan tutorial menciptakan tombol download dengan CSS.
Pertama siapkan terlebih dahulu teks editor mirip Notepad ++ atau yang lainnya.
Kemudian tuliskan code HTML dan CSS mirip berikut:
<!DOCTYPE html> <html> <head> <title>Membuat Tombol Download</title> <style> body { margin: 50px;} .tbl-download { background: black; color: white; border: 2px solid gray; border-radius: 3px; display: inline-block; text-transform: uppercase; font-family: courier; font-weight: bold; padding: 5px;} .tbl-download:hover { cursor: pointer; background: white; color: black;} </style> </head> <body> <p>Belajar CSS menciptakan tombol download bersama <b></b></p> <div class="tbl-download">Download</div> </body> </html> PREVIEW hasil menciptakan tombol download:
Belajar CSS Cara Membuat Icon Awesome Download
Icon Awesome yaitu platform pihak ketiga yang menyediakan Icon-icon yang sanggup diterapkan didalam website. Awesome ini masih satu perusahaan dengan Bootstrap yang sejatinya yaitu Framework CSS dari Develop Twitter.
Membuatnya cukup mudah:
- Pertama buat struktur code mirip diatas.
- Kedua tambahkan isyarat ini <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> diatara tag <head> </head> atau diatas tag <body>. Maksud isyarat ini untuk memanggil file Awesomenya.
- Ketiga tambahkan isyarat ini <i class="fa fa-download" aria-hidden="true"></i> didepan kata Download. Maksudnya yaitu memperlihatkan class "fa fa-download" untuk memanggil class icon download pada Awesome.
Script lengkapnya:
<!DOCTYPE html> <html> <head> <title>Membuat Tombol Download</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> body { margin: 50px;} .tbl-download { background: black; color: white; border: 2px solid gray; border-radius: 3px; display: inline-block; text-transform: uppercase; font-family: courier; font-weight: bold; padding: 5px;} .tbl-download:hover { cursor: pointer; background: white; color: black;} </style> </head> <body> <p>Belajar CSS menciptakan tombol download bersama <b></b></p> <div class="tbl-download"><i class="fa fa-download" aria-hidden="true"></i> Download</div> </body> </html> PREVIEW hasil menciptakan tombol download dengan Icon Awesome:
See the Pen Latihan-Membuat Tombol Download Dengan Icon Awesome () by edisutanto (@edisutanto) on CodePen.
Anda sanggup kembangkan lagi sesuai kebutuhan.
Sampai disini Belajar CSS Cara Membuat Tombol Download Dan Icon Awesome, semoga bermanfaat.
- Salam -