Multiple line button hover effect

Multiple line button hover effects using css and html. This can be used for vertical menus. Demo, code snippet and download options available.

Demo Download

Official Page:Go to website
CreatedSEPTEMBER 13, 2018
Compatible browsersChrome, Firefox, Opera, Safari

HTML Snippet

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

CSS Code

body {     margin: 0;     height: 100vh;     display: flex;     align-items: center;     justify-content: center;     background-color: #333; }  nav ul {     padding: 0;     list-style-type: none;     transform: translateX(0.65em); }  nav li {     width: 8em;     height: 2em;     font-size: 25px;     color: orange;     box-sizing: border-box;     border-left: 0.08em solid;     position: relative;     margin-top: 0.8em;     cursor: pointer; }  nav li::before, nav li::after  {     content: '';     position: absolute;     width: inherit;     border-left: 0.08em solid;     z-index: -1; }  nav li::before {     height: 80%;     top: 10%;     left: -0.3em;     filter: brightness(0.8); }  nav li::after {     height: 60%;     top: 20%;     left: -0.55em;     filter: brightness(0.6); }  nav li:hover span {     transform: translateX(0.15em); }  nav li span {     position: relative;     height: 120%;     top: -10%;     box-sizing: border-box;     border: 0.08em solid;     background-color: #333;     display: flex;     align-items: center;     justify-content: center;     font-family: sans-serif;     text-transform: capitalize;     transform: translateX(-0.65em);     transition: 0.3s; }


See the Pen Button hover effect by Comehope (@comehope) on CodePen.

Latest posts by W3TWEAKS (see all)


Leave a Reply

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