Halo teman-teman semua, berjumpa lagi di tutorial Dumet School. Pada artikel kali ini kita akan latihan Membuat Tombol Menarik Dengan HTML dan CSS tombol ini bisa di pakai pada saat kalian membuat sebuah form login supaya form terlihat lebih menarik. Baik mari kita lihat demo nya pada gambar di bawah ini
Ketika mouse di arah kan pada tombol maka hover akan menampilkan “Done”
Oke mari kita praktekkan sesuai demo gambar di atas ini
Seperti biasa teman-teman siapkan text editornya, lalu copy script html nya di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Membuat Tombol</title>
</head>
<body>
<div id="pb">
<div id="progress">
<div id="done">Done!</div>
</div>
Loading...
</div>
</body>
</html>
Lalu pastekan di text editornya, dan save dengan nama index.html kemudian buka pada browsernya. Maka output akan menghasilkan seperti gambar di bawah ini
Langkah berikutnya kita berikan fungsi css nya, nah teman-teman copy script css nya di bawah ini
<style type="text/css">
* {
margin:0px;
padding:0px;
border:0px;
font-family: sans-serif;
cursor:default;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
body {
background: #555;
}
#pb {
-webkit-box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5), inset 1px 1px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5), inset 1px 1px 20px rgba(0, 0, 0, 0.5);
background: #ccc;
width:250px;
height:38px;
position:absolute;
top:50%;
left:50%;
margin-top:-19px;
margin-left:-125px;
border-radius:8px;
border-top:2px solid #DDD;
border-left:2px solid #DDD;
border-bottom:2px solid #BBB;
border-right:2px solid #BBB;
padding:3px;
overflow:hidden;
text-align:center;
line-height:38px;
font-size:14px;
font-weight:bold;
color:#666;
}
#progress {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
height:38px;
width:48px;
background-color: #0080FF;
border-radius:6px;
background: #6db3f2;
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-8 */
-webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2), 2px 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2), 2px 2px 5px rgba(0, 0, 0, 0.2);
position:absolute;
overflow:hidden;
}
#done:active {
-webkit-box-shadow: inset 0px 0px 18px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 0px 18px rgba(0, 0, 0, 0.4);
border-radius:6px;
}
#done {
text-align:center;
line-height:38px;
font-size:14px;
font-weight:bold;
color:#EEE;
height:38px;
width:250px;
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
cursor:pointer;
}
#pb:hover #progress{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
width:250px;
}
</style>
Lalu tambahkan di dalam tag <head>, jika sudah save dan refresh pada browsernya. Maka tombol yang kita buat telah berhasil. Sangat mudah bukan..??!!
Oke sekian dulu di tutorial kali ini tentang Membuat Tombol Menarik Dengan HTML dan CSS kita jumpa lagi di tutorial yang akan datang, mudah-mudahan bermanfaat untuk teman-teman khususnya yang suka esperimen dengan html dan css nya. Terimakasih dan sampai jumpa 🙂