Membuat Button Download Dengan CSS

Kemaren saya sedang iseng-iseng belajar tentang css3. Dan langsung kepikiran untuk membuat tampilan button untuk link download file-file yang ada pada blog saya ini. Dengan menggunakan css3 kita jadi bisa membuat tampilan seperti kotak yang sisinya melengkung atau membuat sebuah lingkaran dan hal lainnya.

Berikut ini adalah filenya :
file style.css
.button {
 width: 100px;
 height: 100px;
 border-radius: 50px;
 cursor: pointer;
 font-family: sans-serif;
 text-align: center;
 text-decoration: none;
 font-size: 18px;
 line-height: 100px;
 color: white;
 display: inline-block;
 background: rgba(11, 194, 240, 0.5);
 box-shadow: rgba(47, 133, 155, 0.5) 0px 8px;
}
.button:hover {
 background: rgba(32, 188, 228, 0.8);
 box-shadow: rgba(35, 110, 129, 0.5) 0px 8px;
}

.button:active {
 background: rgba(11, 194, 240, 0.8);
 box-shadow: rgba(35, 110, 129, 0.5) 0px 4px;
 top: 4px;
 position: relative;
}

file index.html
<!doctype>
<html>
<head>
 <title>my awesome website</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <center>
  <a href="http://japariskandar.com" class="button rounded orange">download</a>
  <a href="http://japariskandar.com" class="button rounded orange">view source</a>
 </center>

</body>
</html>

Demo:
download view source

2 comments: