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.
Example
<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
<style>
.a:hover{
box-shadow:3px 3px 3px rgba(180,180,180,0.5);
}
</style>
Try </>
The shadow appears when a user hovers the mouse over the link.
The box-shadow property represents the shadow around the anchor text.
Example
<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
<style>
.c:hover{
background-color:rgba(100,100,100,1);
color:white;
}
</style>
Try </>
Was this article helpful?