Link Berbentuk Tombol
Umumnya kita membuat html link (tag a href) berbentuk text yang bisa di click. nah… disini saya akan berikan cara membuat supaya link (a href) berbentuk tombol seperti html tag input atau tag botton dengan menggunakan CSS3.
Berikut ini coding HTMM dan CSS untuk membuat tombol Push Botton untuk Link href dengan CSS:
<html>
<head>
<title>Tombol Link</title>
<style>
a.tombol {
background-color:#b0b0b0;
font:bold 20px arial,sans-serif;
text-decoration:none;
color:#fff;
margin:5px;
position:relative;
padding:10px 20px;
border-radius: 5px;
box-shadow: inset 0px 1px 0px #a0a0a0,
0px 3px 0px 0px #808080,
0px 5px 3px #999;}
a.tombol:active {
background-color:#ff0000; top:3px;
box-shadow: inset 0px 1px 0px #a0a0a0,
0px 1px 0px 0px #808080,
0px 1px 3px #999;}
</style>
</head>
<body>
<h2>Membuat Tombol Push Botton<br/>
untuk Link href dengan CSS</h2>
<hr align="left" width="200"/>
<a class="tombol" href="?t=1">1</a>
<a class="tombol" href="?t=2">2</a>
<a class="tombol" href="?t=3">3</a><br/><br/><br/>
<a class="tombol" href="?t=4">4</a>
<a class="tombol" href="?t=5">5</a>
<a class="tombol" href="?t=6">6</a><br/><br/><br/>
<a class="tombol" href="?t=7">7</a>
<a class="tombol" href="?t=8">8</a>
<a class="tombol" href="?t=9">9</a><br/><br/><br/>
<a class="tombol" href="?t=*">*</a>
<a class="tombol" href="?t=0">0</a>
<a class="tombol" href="?t=#">#</a><br/><br/><br/>
<hr align="left" width="200"/>
</body>
</html>
Selamat mencoba, semoga berhasil.
Coding Website 