Button by mi-series
#e8e8e8
1button { 2 width: 160px; 3 line-height: 40px; 4 font-weight: 500px; 5 font-size: 17px; 6 letter-spacing: 2px; 7 text-decoration: none; 8 text-transform: uppercase; 9 padding: 0; 10 background: #FBEAEB; 11 position: relative; 12 z-index: 2; 13 color: #FBEAEB; 14 perspective: 300px; 15 transform-style: preserve-3d; 16 border-radius: 6px; 17 border: none; 18} 19 20button:hover { 21 color: #2F3C7E; 22} 23 24button::after { 25 position: absolute; 26 content: ""; 27 top: 0; 28 left: 0; 29 width: 100%; 30 height: 100%; 31 font-weight: 500px; 32 background: #2F3C7E; 33 border-radius: 6px; 34 z-index: -1; 35 transform-origin: center bottom; 36 transform: rotateX(0); 37 transition: all 0.3s ease; 38} 39 40button:hover::after { 41 transform: rotateX(-180deg); 42}
686 views
686 views
MIT License