Button by Manish-Tamang
#e8e8e8
1a { 2 position: relative; 3 display: inline-flex; 4 width: 180px; 5 height: 55px; 6 margin: 0 15px; 7 perspective: 1000px; 8 text-decoration: none; 9} 10 11a:before, 12a:after { 13 position: absolute; 14 content: "3D HOVER"; 15 height: 55px; 16 width: 180px; 17 display: flex; 18 align-items: center; 19 justify-content: center; 20 border: 5px solid black; 21 box-sizing: border-box; 22 font-size: 19px; 23 letter-spacing: 1px; 24 font-family: "Montserrat", sans-serif; 25 text-align: center; 26 transition: transform 0.25s; 27} 28 29a:before { 30 color: #fff; 31 background: #000; 32 transform: rotateY(0deg) translateZ(25px); 33} 34 35a:after { 36 color: #000; 37 transform: rotateX(90deg) translateZ(25px); 38} 39 40a:hover:before { 41 transform: translateZ(-25px) rotateX(-90deg); 42} 43 44a:hover:after { 45 transform: rotateY(0deg) translateZ(25px); 46} 47
85 views
85 views
MIT License