Mempercantik Tombol Submit dengan CSS 3
Untuk memperindah web kita perlu memberikan sentuhan seni, disini saya akan memberikan atau share script css3. Kita akan mempercantik tombol submit yang ada dalam form, agar enak dilihat. Langsung saja kita memulai dengan membuat form sederhana dan tambahkan submit.
<head> <title>Tombol Cantik dengan CSS3</title> <link href="css.css" rel="stylesheet" type="text/css"></link> </head> <body> <form id="form1" method="post" name="form1"> <label> <input name="Submit" type="submit" value="Submit" /> </label> </form> </body>
Simpan dengan nama tombol_cantik.html, kemudian buat file css untuk mempercantik tombol submit seperti dibawah ini.
.submit
{
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:10px;
background:#a1d8f0;
background:-moz-linear-gradient(top, #badff3, #7acbed);
background:-webkit-gradient(linear, left top, left bottom, from(#badff3), to(#7acbed));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
border:1px solid #7db0cc !important;
cursor: pointer;
padding:11px 16px;
font:bold 11px/14px Verdana, Tahomma, Geneva;
text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
color:#fff;
-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
margin-left:12px;
padding:7px 21px;
}
.submit:hover,
.submit:focus,
.submit:active{
background:#a1d8f0;
background:-moz-linear-gradient(top, #7acbed, #badff3);
background:-webkit-gradient(linear, left top, left bottom, from(#7acbed), to(#badff3));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.submit:active
{
text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
Simpan dengan nama submit.css
Tampilan seperti dibawah ini :
Silahkan dilihat bagaimana hasil yang kalian buat, silahkan di modifikasi sendiri warna dan ukuran bentuknya. Semoga membantu dan menambah referensi bangi teman-teman.
Comments
Post a Comment