Close

Playful button hover effects

This is an example of a web form with buttons with hover effects, designed using HTML, CSS, JavaScript and Bootstrap framework 4. The icons have been imported to the code with their URLs, whereas the media queries are used to increase the responsiveness of the form. JavaScript functions have been used to implement the hover effects on buttons. There are three buttons in the form named as Buttton, Playful Hover, and Simple. The colors are predefined as --color-hover: #2B3044, --background: #362A89, --hover-back: #6D58FF, --hover-front: #F6F8FF, --background: #275EFE, and --background-hover: #1749DB. The cursor style for the buttons is set as pointer to get the hand cursor effect. The form is given the styles of font-family as 'Inter UI', 'Inter', Arial, and background as #E1E6F9. The buttons are given the styles of border-radius as 20px, line-height as 24px, font-size as 14px, font-weight as 600, and letter-spacing as .02em. The first two buttons take a fill effect with the colors #6D58FF, and #F6F8FF, whereas the third one takes a transforming effect. Source: https://codepen.io/aaroniker/pen/OJPqPMR

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.

Several Related Snippets

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