Close

Simple CSS Button Hover Effects

This is another simple example of a button view with hover effects designed by using HTML and CSS. The font of the body is set as 'Open Sans Condensed', sans-serif, the display as flex and flex direction as column. Box 1 is given a background color of #FF6766, box 2 is given a color of #3C3C3C and box 3 #66A182. For the buttons, text-align is set as center and cursor is set as pointer. For button 1, styles before a hover event are set as opacity: 1, and transform: scale (1, 1) where it will change to opacity: 0, and transform: scale (0.1, 1) on a hover event. For button 2, styles before a hover event are set as transform: rotate (-45deg), and background-color: rgba (255,255,255,0) where it will change to transform: rotate(45deg), background-color: rgba(255,255,255,0) on a hover event. For button 3, styles before a hover event are set as opacity: 0, and transform: scale (0.5,0.5) where it will change to opacity: 1, and transform: scale(1,1) on a hover event. Source: https://codepen.io/rauldronca/pen/mEXomp

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.