3D button with hover effects

We will show some of the ways to use the CSS language to stylize the HTML button with hover effects.

by ITpresent

HTML

<button class="a">CLICK ME</button>


















<br><br><br>
<a href="https://itpresent.com/web/css/buttons.php" target="_blank">CSS Styling Button Examples</a>

CSS

.a {
background-color: black;
border: 2px solid white;
color: white;
font-size: 17px;
font-weight: bold;
padding: 3px 6px;
text-decoration: none;
border-top: 9px solid #F0F0F0;
border-left: 9px solid lightgray;
border-right: 9px solid lightgray;
border-bottom: 9px solid #4f6267;
}
.d:hover {
border-top: 9px solid #4f6267;
border-left: 9px solid lightgray;
border-right: 9px solid lightgray;
border-bottom: 9px solid #F0F0F0;
}