SeniKoding.com - sebelumnya saya akan jelaskan singkat apa itu CSS. CSS adalah salah satu bahasa code yang digunakan untuk membuat tampilan website menarik "desain website". Dengan CSS tampilan website akan lebih menarik dan indah. CSS jika di ibaratkan seperti objek rumah, maka CSS didalam rumah adalah seperti Cat tembok, cat bangku, cat meja, list pintu, list pagar, list jendela, bentuk rumah yang elegan, dan lain sebagainya. Begitu juga CSS didalam website, seperti warna tombol, list tombol, warna background, desain menu 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 adalah tombol atau link tempat untuk mendownload suatu file. Untuk membuat tombol tersebut alangkah baiknya jika dibuat semenarik mungkin. Nah dibawah ini akan saya buatkan tutorial membuat tombol download dengan CSS.
Pertama siapkan terlebih dahulu teks editor seperti Notepad ++ atau yang lainnya.
Kemudian tuliskan code HTML dan CSS seperti 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 membuat tombol download bersama <b>SeniKoding.com</b></p>
<div class="tbl-download">Download</div>
</body>
</html>
PREVIEW hasil membuat tombol download:
See the Pen Latihan-membuat tombol download dengan CSS (SeniKoding.com) by edisutanto (@edisutanto) on CodePen.
Belajar CSS Cara Membuat Icon Awesome Download
Icon Awesome adalah platform pihak ketiga yang menyediakan Icon-icon yang dapat diterapkan didalam website. Awesome ini masih satu perusahaan dengan Bootstrap yang sejatinya adalah Framework CSS dari Develop Twitter.
Membuatnya cukup mudah:
- Pertama buat struktur code seperti diatas.
- Kedua tambahkan kode 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 kode ini untuk memanggil file Awesomenya.
- Ketiga tambahkan kode ini <i class="fa fa-download" aria-hidden="true"></i> didepan kata Download. Maksudnya adalah memberikan 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 membuat tombol download bersama <b>SeniKoding.com</b></p>
<div class="tbl-download"><i class="fa fa-download" aria-hidden="true"></i>
Download</div>
</body>
</html>
PREVIEW hasil membuat tombol download dengan Icon Awesome:
See the Pen Latihan-Membuat Tombol Download Dengan Icon Awesome (SeniKoding.com) by edisutanto (@edisutanto) on CodePen.
Anda bisa kembangkan lagi sesuai kebutuhan.
Sampai disini Belajar CSS Cara Membuat Tombol Download Dan Icon Awesome, semoga bermanfaat.
- Salam -
Tidak ada komentar
Posting Komentar
Dilarang SPAM Komentar!