Close

Button Hover Effects

This is another example of a button view with hover effects designed by using HTML and CSS. Variables have been created to define colors to store color values in CSS so variable names could be used repeatedly to avoid setting the same value in different places. The body is given the styles of background: #f5f5f5, font-family: 'Poppins', sans-serif. General styles for the button group are set as width: 100%, text-align: center, margin-bottom: 125px, margin: 5em 0, padding: 10px 30px, margin: 1em, border-radius: 5px, text-decoration: none and transition: 0.5s ease-in-out. On a hover event, button 1 will change its styles to box-shadow: 0px 0px 0px 2.5px #fff, 0px 0px 0px 5px $yellow, 0px 0px 0px 10px white, 0px 0px 0px 10.5px $yellow, background: white, color: $yellow. Button 2 will change its styles to box-shadow: 0px 0px 0px 2.5px white inset, 0px 0px 0px 5px $cyan, Button 3 to letter-spacing: 10px, box-shadow: 2.5px 2.5px 0px 5px white, 5px 5px 0px 7.5px $red, background: none, border: 2.5px solid $red, color: $red. Likewise, all the 8 buttons will change its styles according to the given styles on a hover event. Source: https://codepen.io/samflickgraphics/pen/KajNRm

Post Comment or Questions

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

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

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