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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tombol Cantik dengan CSS3</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>
<form id="form1" name="form1" method="post">
<label>
<input type="submit" name="Submit" value="Submit">
</label>
</form>
</body>
</html>

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 :

sumbit css3

Silahkan dilihat bagaimana hasil yang kalian buat, silahkan di modifikasi sendiri warna dan ukuran bentuknya. Semoga membantu dan menambah referensi bangi teman-teman.

Tentang -=N N=-

Simple Thinks
Pos ini dipublikasikan di CSS, Tips dan Trick. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s