Close

CSS button hover effects

This is an example of a button view with hover effects designed by using HTML and CSS. The buttons are named as button 1, 2, 3, 4, 5. The buttons are given a general style set of width as 170px, text-align as center, text-transform as uppercase and cursor as pointer. Button 1 is given a neo outline effect on a hover event by setting the styles as color: #00d7c3 and box-shadow: 0 0 10px 0 #00d7c3 inset, 0 0 20px 2px #00d7c3. Button 2 is given the styles of border: 3px solid #c266d3, and a background color of #c266d3 and will become transparent on a hover event. Button 3 is given a shadow effect on a hover event by giving the style of box-shadow: 8px 8px #99bdff and transition: .3s. Styles for button 4 are set as background-color: transparent, border: 3px solid #ff0251, color: #ff0251, transition: .3s and will take a pulse effect on a hover event by animation: pulse 1s infinite, whereas button 5 will take a gradient hover effect by background-position: -200%, transition: background 300ms ease-in-out styles. Source: https://codepen.io/woolandcotton/pen/mBmLwq

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.