Do you need some cool CSS buttons. Look no further ! see this code i have posted below.
Spacing button
CSS
background: #0058ff;
border: none;
color: white;
padding: 8px 9px;
border-radius: 3px;
box-shadow: 0px 3px 60px #0c49d7;
transition: all 0.5s !important;
}
.btn-1:hover {
background: #0004ff;
letter-spacing: 2px;
}
The HTML
<button class="btn-1">Button</button>
The Output
Pressing button
CSS
.btn-2 {
background: #ff6000;
padding: 11px 24px;
font-size: 21px;
border: 0px;
color: white;
box-shadow: 0px 4px 0px #b50f0f;
transition: all 0.1s;
outline: navajowhite;
}
.btn-2:active {
box-shadow: 0px 2px 0px #b50f0f;
transform: translateY(6px);
}
The HTML
<button class="btn-2">Button 2</button>
The Output
Hidden text button
CSS
.btn-3 {
padding: 15px 23px;
background: #773dca;
color: white;
font-size: 20px;
border: none;
outline: none;
border-radius: 100px 0px 100px 100px;
transition: all 0.3s;
}
.btn-3 span {
opacity: 0;
margin-left: -20px;
transition: all 0.5s;
color: #ffd4d4;
}
.btn-3:hover span {
opacity: 1;
margin-left: 2px;
}
.btn-3:hover {
box-shadow: 0px 0px 70px #773dcaab;
}
The HTML
<button class="btn-3">
Button 2 <span>Go</span>
</button>
The Output
That's all for now if you need more like this Subscribe to Tronic247 Youtube Channel