30 CSS Hover Effects For Buttons Article. Download Source. Recover Password. Recover Password. 15 CSS Mobile Header Animations. Responsive jQuery Pop Up Gallery. Don't miss our next tutorial! Subscribe to our newsletter. Dec 04, 2019 Nowadays, every web developer wants to explore trendy design for each component of the webpage. Either it is regard to button styles or hovers effects in CSS or something like that. So, I’m here to show you some ways to design modern social media icons with a beautiful hover effect using CSS. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. 15+ CSS Hover Effects, Best CSS Hover Effects for Presentations and can be use easily to provide attractiveness by this collection. Add stylish animated hover effect on your button or images or on other elements with help of these Free Html CSS Hover Effects. Dec 15, 2019 Enroll My Course: Next Level CSS Animation and Hover Effects Our Channel Membership And Get Source Code. Jul 15, 2019 On hover, the button is raised with a slight shadow effect. The text also has a slight shadow glow effect on hover. Again, this button is fully customizable so feel free to edit it in any way you want. Please find the HTML and CSS code below for this button. Button B Preview.
Learn how to style buttons using CSS.
Basic Button Styling
Example
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Try it Yourself »background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Button Colors
Use the
background-color
property to change the background color of a button:Example
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
Try it Yourself ».button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
Button Sizes
Use the
font-size
property to change the font size of a button:Example
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Try it Yourself ».button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Use the
padding
property to change the padding of a button:Example
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Try it Yourself ».button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Rounded Buttons
Use the
border-radius
property to add rounded corners to a button:Example
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Try it Yourself ».button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Colored Button Borders
Use the
border
property to add a colored border to a button:Example
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Try it Yourself »
Hoverable Buttons
Use the
:hover
selector to change the style of a button when you move the mouse over it.Tip: Use the
transition-duration
property to determine the speed of the 'hover' effect:Example
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Try it Yourself »transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Shadow Buttons
Use the
box-shadow
property to add shadows to a button:Example
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Try it Yourself »box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Disabled Buttons
Use the
opacity
property to add transparency to a button (creates a 'disabled' look).Tip: You can also add the
cursor
property with a value of 'not-allowed', which will display a 'no parking sign' when you mouse over the button:Example
Try it Yourself »Button Width
By default, the size of the button is determined by its text content (as wide as its content). Use the
width
property to change the width of a button:Example
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
Try it Yourself ».button2 {width: 50%;}
.button3 {width: 100%;}
Button Groups
Remove margins and add
float:left
to each button to create a button group:Example
Try it Yourself »Bordered Button Group
Use the
border
property to create a bordered button group:Example
Try it Yourself »Css Hover Code
Vertical Button Group
Use
display:block
instead of float:left
to group the buttons below each other, instead of side by side:Example
Try it Yourself »Button on Image
Try it Yourself »Animated Buttons
Example
Add an arrow on hover:
Try it Yourself »Example
Add a 'pressed' effect on click:
Try it Yourself »
Example
Fade in on hover:
Try it Yourself »Example
Add a 'ripple' effect on click: