How to design simple CSS/CSS3 buttons with hover effects



Cascading Style Sheets (CSS) used for describing the presentation of a document written in Markup Language. CSS language is also used to set the visual style of web pages and user interfaces written in HTML and XHTML. We can create the proper layouts or web pages, beautiful user interfaces, contents and much more. CSS language has the simple syntax and bases on English keywords that are easy to understand.
In this tutorial, we will learn that "how to design a simple and beautiful CSS button with hover effects?"

Default HTML button

Default HTML button looks like as below:


Default HTML button code is below:
<a href="#"><button>Text here</button></a>

How to put CSS color in simple HTML button?

Using CSS language, we can color the widgets, backgrounds, borders etc.
To color an HTML button, use the code defined below just before the </head> tag that you find in your template code.
.button{
background:yellow;
}
Result:

.button is the declared keyword that is also the keyword of HTML button <button>
We may declare user defined keyword and then we can call the whole CSS code using class="YourDeclaredSyntax" tag as <button class="YourDeclaredSyntax"> in button's HTML code.
We may use the HEX color codes.

How to change the color/size of text used in button using CSS?

The text color of button can also be changed using the property color:red; (without quote marks) defined below:
.button{
background:yellow;
color:red;}
Result:


To change the color of text, use font-size:25px; property.

How to resize the HTML button using CSS?

HTML button can be resized using property padding:20px; as defined below:
.button{
background:yellow;
color:red;
padding:20px;
}
Result:


Set width of button using width:30px.

Add border to HTML button using CSS

To add the border, use the property
border: 2px solid black; and for HEX color border:2px solid #000000; as defined below:
.button{
background:yellow;
color:red;
padding:20px;
border:2px solid #000000;
}
Result:

Round the button using border-radius:10px;
Result:

How to add CSS hover effect in HTML button?

Use :hover keyword to add hover effect alongside the simple CSS code as defined below:
.button{
background:yellow;
color:red;
padding:20px;
border:2px solid #000000;
border-radius:10px;
}
.button:hover{
background:red;
color:white;
padding:20px;
border:2px solid #eeeeee;
border-radius:10px;
}
In hover section, you may use different background color, text color or border color that will show the different effect on hover.
Result:

How to add the icon in button using CSS?

To add the icon alongside the text in button, use the properties defined below:

  • background:yellow url("icon-image-url"); (Quote marks are necessary)
  • background-repeat:no-repeat; To use Icon for once.
  • background-position:10%; Positioning the Icon with respect to the text.

.button{
background:yellow url("icon-image-url");
background-repeat:no-repeat;
background-position:10%
color:red;
padding:20px;
border:2px solid #000000;
border-radius:10px;
}
Result:

Some pre-coded buttons and extensions

Using property to give different color to each border side:

  • border-left:2px solid color1;
  • border-bottom:2px solid color2;
  • border-right:2px solid color3;
  • border-top:2px solid color4;
.button{
color:black;
background:#E0F2F1;
padding:20px;
border-left:2px solid #008CBA;
border-bottom:2px solid #f44336;
border-right:2px solid #4CAF50;
border-top:2px solid #00BCD4;
border-radius:10px;}
.button:hover{
color:black;
background:white;
padding:20px;
border-left:2px solid #00BCD4;
border-bottom:2px solid #008CBA;
border-right:2px solid #f44336;
border-top:2px solid #4CAF50;
border-radius:10px;}

Using shadow property on hover:

  • box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
.button{
color:black;
background:#E0F2F1;
padding:20px;
border-left:2px solid #008CBA;
border-bottom:2px solid #f44336;
border-right:2px solid #4CAF50;
border-top:2px solid #00BCD4;
border-radius:10px;}
.button:hover{
color:black;
background:white;
padding:20px;
border-left:2px solid #00BCD4;
border-bottom:2px solid #008CBA;
border-right:2px solid #f44336;
border-top:2px solid #4CAF50;
border-radius:10px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Buttons in horizontal order with opacity property:

  • float:left;
  • opacity:0.5;



.button{
float:left;
color:white;
background:#009688;
padding:20px;
border:1px solid #004D40;
}
.button:hover{
opacity:0.5;
float:left;
color:white;
background:#009688;
padding:20px;
border:1px solid #004D40;
}

Exchanging background color to text and vice versa on hover:

.button{
font-size:25px;
color:white;
background:#8BC34A;
padding:20px;
border-radius:5px;
}
.button:hover{
font-size:25px;
color:#8BC34A;
background:white;
padding:20px;
border-radius:5px;
}
Click here to get more CSS designed buttons with animated Hover effects.

Conclusion

Is that tutorial helpful? Leave your worthy review and let us know.
For any question or help, feel free to contact us.