Web4College

CSS buttons

CSS bottons or links can be designed by css properties. Firstly, we design a simple button. padding, text-decoration, color properties and :hover pseudo class are used to make buttons.

Preview Example
Try it

Example
Try it
<style>
.a{
background-color:rgb(26,161,242);
padding:15px 20px;
color:white;
text-decoration:none;
}
</style>

background-color defines the background color of the link.

padding property defines the space around the anchor text.

text-decoration removes the line under the text.


Now we'll add the effects for the event (mouse hover over the link).

Example
Try it
<style>
.a:hover{
box-shadow:3px 3px 3px rgba(180,180,180,0.5);
}
</style>

The shadow appears when a user hovers the mouse over the link.


The box-shadow property represents the shadow around the anchor text.

Example
Try it
<style>
.c{
padding:15px 20px;
text-decoration:none;
border-radius:7px;
box-shadow:3px 3px 3px rgba(180,180,180,0.6), 3px 3px 3px rgba(150,150,150,0.5) inset;
}
</style>

border-radius property converts the corners into rounded shape.

box-shadow property defines shadow internally (inset) and externally.


Now add the mouse hover effect.

Example
Try it
<style>
.c:hover{
background-color:rgba(100,100,100,1);
color:white;
}
</style>