Button by vishalparajuli
#e8e8e8
1.button { 2 width: 100px; 3 height: 50px; 4 position: relative; 5 perspective: 800px; 6} 7 8.button__front, 9 .button__back { 10 width: 100%; 11 height: 100%; 12 display: flex; 13 align-items: center; 14 justify-content: center; 15 font-size: 18px; 16 font-weight: bold; 17 text-transform: uppercase; 18 color: #fff; 19 background-color: #3498db; 20 border-radius: 5px; 21 position: absolute; 22 backface-visibility: hidden; 23 transition: transform 0.5s ease; 24} 25 26.button__back { 27 background-color: #e74c3c; 28 transform: rotateY(180deg); 29} 30 31.button:hover .button__front { 32 transform: rotateY(-180deg); 33} 34 35.button:hover .button__back { 36 transform: rotateY(0); 37}
345 views
345 views
MIT License