css button style

We can make a web button by any object by modifying its shape to be a button then adding any function by OnClick or other events.

Simple HTML and CSS Code to create Button

<style>
.button_style {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    width: 100px;
}
</style>

<a class="button_style" href="#">A Button</a>
<button class="button_style" >Button</button>
<div class="button_style" >Div Button</div>
<span class="button_style" >Span Button</span>

A Button

Div Button

Span Button

Adding simple hover style to change the background-color of Buttons

.button_style:hover {
    background-color: #6ECF72;
}

A Button

Div Button

Span Button

Adding Shadow style to Buttons

.button_style {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

A Button

Div Button

Span Button

Make Buttons disable

.button_disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

A Button

Div Button

Span Button

If this post was good and helpful for you, Please give it Like.

.