Close

Hover animation techniques

This is an example of a form with six buttons with animations designed using HTML and CSS. The buttons are divided into two columns and given names button 1- button 6. Each button is given its container. The body of the form is given the styles of height and width: 100%, display: flex, flex-direction: column, flex-wrap: wrap, and font-family: 'Open Sans Condensed', sans-serif. Six different colors are given to each container which are #333, #4E598C, #8499B1, #9888A5, #7B6D8D, and #565554. The buttons are given a common set of styles as position: relative, color: white, width: 256px, height: 64px, line-height: 64px, transition: all 0.3s, transform: scale (1, 1). The buttons are given effects according to the before and after the hover event. For button 1, before hover event styles are opacity: 1, and transform: scale (1, 1) whereas after hover event styles would be transition: all 0.3s, border: 1px solid rgba (255, 255, 255, 0.5), opacity: 1, and transform: scale (1, 1). Likewise, all the buttons are equipped with after hover event animations including a rotating animation for button 2. Source: https://codepen.io/CTNieves/pen/pbLGZW

Post Comment or Questions

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

Your email address will not be published. Required fields are marked *

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