CSS Tutorials: Button Tutorial

CSS Button Style

In the following example, we create a border. Inside that border, we assign various properties so that borders look like buttons.

Example: 1

.button
{
border: 1px inset #cccccc;
color: #ffffff;
background-color: #014db7;
font-family:Comic Sans MS;
font-size: 15px;
font-weight: bold;
text-decoration: none;
}

</style>
</head>
<body>
<div align="center">
<h2>CSS Button</h2>

<a href="#" class="button">Home</a>
<a href="#" class="button">HTML</a>
<a href="#" class="button">Contact</a>

</div>
</body>
</html>

Output

CSS Button

Home HTML Contact

If we add hover, it will be more clear to us.

Example: 2

<html>
<head>
<style>
.button
{
border: 1px inset #cccccc;
color: #ffffff;
background-color: #0066ff;
font-family:arial;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}

a.button:link{
color: #ffffff;
}
a.button:visited{
color: #cccccc;
}
a.button:hover{
color: #66cc33;
border: 1px outset #00ff00;
}

</style>
</head>
<body>
<div align="center">
<h2>Sample CSS Button</h2>

<a href="index.htm" class="button">Home</a>
<a href="gallery.htm" class="button">Gallery</a>
<a href="contact.htm" class="button">Contact</a>

</div>
</body>
</html>

Output

Sample CSS Button

Home HTML Contact

CSS Tutorials

Adscend

9.9.13

Button Tutorial

CSS Button Style

CSS Button

Sample CSS Button

No comments:

Post a Comment