Close

Icon with page turn effect on hover

This is an example of a web form with a set icons with a page turn effect on hover, designed using CSS, HTML, and JavaScript. The fonts and icons are imported to the form with their URLs. JavaScript functions have been used to implement the mouse hover effects. The icons are given the styles of box-sizing: border-box, perspective: 50em, transition: all 0.4s ease, background-color: #7e1946, border-radius: 5px, border: 1px solid rgba(255, 255, 255, 0.1), box-sizing: 0 0 5px rgba(0, 0, 0, 0.5), color: #e6e6e6, display: inline-block, font-size: 40px,height: 75px, line-height: 75px, margin: 40px, position: relative, text-align: center, and width: 75px. The icons are given a border radius of 5px 0 0 5px. The icons are primarily given two background colors; #69153a and #7e1946 which change into #1d5599 and #2468bb, in a hover event with a transform style of transform: rotateY(180deg).

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.