Perspective button hover effect

Perspective button hover effect using CSS and HTML only. This can be used for menus or buttons animation hover effects. Demo and Download options available.

Demo Download

AuthorComehope
CreatedSEPTEMBER 28, 2018
LicenseOpen
Compatible browsersChrome, Firefox, Safari

HTML Snippet

<ul>   <li>home</li>   <li>products</li>   <li>services</li>   <li>contact</li> </ul>

CSS Code

body {     margin: 0;     height: 100vh;     display: flex;     align-items: center;     justify-content: center;     background: cornsilk; }  ul {     padding: 0;     list-style-type: none; }  ul li {     box-sizing: border-box;     width: 15em;     height: 3em;     font-size: 20px;     border-radius: 0.5em;     margin: 0.5em;     box-shadow: 0 0 1em rgba(0,0,0,0.2);     color: white;     font-family: sans-serif;     text-transform: capitalize;     line-height: 3em;     transition: 0.3s;     cursor: pointer; }  ul li:nth-child(odd) {     background: linear-gradient(to right, orange, tomato);     text-align: left;     padding-left: 10%;     transform: perspective(500px) rotateY(45deg); }  ul li:nth-child(even) {     background: linear-gradient(to left, orange, tomato);     text-align: right;     padding-right: 10%;     transform: perspective(500px) rotateY(-45deg); }  ul li:nth-child(odd):hover {     transform: perspective(200px) rotateY(45deg);     padding-left: 5%; }  ul li:nth-child(even):hover {     transform: perspective(200px) rotateY(-45deg);     padding-right: 5%; }

Preview

Perspective button hover effect preview

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

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