css button style

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.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment