<button class="button-action">button</button>
<a class="button-action" href="">anchor</a>
/*
Off-set the button
*/
body{
margin: 10%;
}
/*
Stylized Button
With borders for 3D effect
*/
.button-action{
font-family: georgia;
color: #008CBA;
text-decoration: none;
padding: 20px;
font-size: 16px;
border-radius: 9%;
border: 4px solid #008CBA;
}
/*
Mouse hovers.
Change cursor pointer style
Brighten button
*/
.button-action:hover{
cursor: pointer;
background: #008CBA;
color: #fff;
}
/*
Mouse is pressed
Reverse border colour to look
more pressed in.
*/
.button-action:active{
border-top: 4px solid #003648;
border-right: 4px solid #029ED2;
border-bottom: 4px solid #029ED2;
border-left: 4px solid #003648;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.