Button Link with CSS
In order to look good, designers can create links in the form of images such as buttons, icons or other. The most groove is shaped link button. With CSS, you do not need to use the pictures or the like for example the image button, simply by making a style border on the link then the link can be made in the form of buttons. Pay attention and make a script for the following links.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Button Link with CSS</title>
<style type="text/css">
body {margin-left:20%;
font-family:Verdana; font-size:12px;
font-weight:bold;}
a:link
{ text-decoration:none; background-color:#0066CC;
color:#FFFFFF; border-color:#003399; border-style:outset;
border-width:6px; padding:4px 4px 4px 4px;}
a:visited
{ text-decoration:none; background-color:#0066CC;
color:#FFFFFF; border-color:#003399; border-style:outset;
border-width:6px; padding:4px 4px 4px 4px;}
a:active
{ text-decoration:none; background-color:#0066CC;
color:#FFFFFF; border-color:#003399; border-style:outset;
border-width:6px; padding:4px 4px 4px 4px;}
a:hover
{ text-decoration:none; background-color:#0099FF;
color:#FFFFFF; border-color:#003399; border-style:outset;
border-width:6px; padding:4px 4px 4px 4px;}
td {padding: 12px 12px 12px 12px;}
</style>
</head>
<body>
<table width="100">
<tr>
<td><p><a href="http://tophtml.blogspot.com">HOME</a></p></td>
<td><p><a href="http://tophtml.blogspot.com/about.html">ABOUT</a></p></td>
<td><p><a href="http://tophtml.blogspot.com/contact.html">CONTACT</a></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>
The result will look link the three-dimensional shape obtained from the value of border-style: outset.
Link As Button: use the border settings to obtain 3-dimensional button-shaped links.
0 comments:
Post a Comment