Custom content

Kamis, 06 Februari 2014

23.27

Membuat Button Sederhana Dengan CSS

Admin    No comments


Script htmlnya di bawah ini:

<html>
<head>
<title>Membuat Tombol Sederhana Dengan
CSS</title>

</head>

 <body>
<span class="button"><a href="#">button</a></span>
</body>
</html>


Script CSS nya
<style type="text/css">
.button {
text-align:center;
}
.button a {
border-radius: 5px;
padding:5px 15px;
background:-webkit-linear-gradient(top, #0F3, #0C3);
color:#FFFFFF;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
}
.button a:hover {
background:#00FF66;
color:#FFF;
}
</style>



jika di gabungkan akan menjadi
<html>
<head>
<style type="text/css">
.button {
text-align:center;
}
.button a {
border-radius: 5px;
padding:5px 15px;
background:-webkit-linear-gradient(top, #0F3, #0C3);
color:#FFFFFF;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
}
.button a:hover {
background:#00FF66;
color:#FFF;
}
</style>
<title>Membuat Tombol Sederhana Dengan CSS</title>
</head>

<body>
<span class="button"><a href="#">button</a></span>
</body>
</html>


Note : tag <span> bisa juga diganti dengan tag <div>

Hasil nya seperti di bawah ini :


Semoga Bermanfaat !!

MR: EDITOR

Admin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Related Posts

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

 

Copyright @ 2013 Apa Itu Komputer.

Designed by Templateify & CollegeTalks