Button by roroland
#e8e8e8
1.flip-button { 2 --col1: #4CAF50; 3 --col2: #4f16ac; 4 --col3: #d8d1e4; 5 position: relative; 6 min-width: 10rem; 7 min-height: 3rem; 8 perspective: 500px; 9} 10 11.flip-button .button { 12 appearance: none; 13 position: absolute; 14 inset: 0; 15 height: 100%; 16 border-radius: 30px; 17 font-size: .75em; 18 font-weight: bold; 19 color: #fff; 20 text-transform: uppercase; 21 background-color: var(--col1); 22 border: none; 23 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 24 transition: all 1s ease-out .5s; 25 transform-style: preserve-3d; 26 width: 100%; 27} 28 29.flip-button:hover .button { 30 background-color: var(--col2); 31 cursor: pointer; 32 transform: rotateY(180deg) scale(1.5); 33 transition: all .3s ease-out; 34} 35 36.flip-button:hover .button:active { 37 background-color: rgba(81, 23, 173, 0.75); 38 transform: rotateY(180deg) scale(1.45); 39 outline: 10px solid var(--col3); 40 transition: all .1s ease-out; 41} 42 43.flip-button .button::after { 44 content: ''; 45 box-shadow: 0px 0px 60px 5px rgba(0, 0, 0, 0.25); 46 display: block; 47 border-radius: 30px; 48 height: 100%; 49 width: 100%; 50 transition: all .3s ease-out .95s; 51} 52 53.flip-button:hover .button::after { 54 box-shadow: 0px 0px 1px 10px rgba(160, 29, 149, 0.15); 55 transition: all .3s ease-out; 56} 57 58.flip-button .text-front, 59.flip-button .text-back { 60 display: block; 61 position: absolute; 62 top: 50%; 63 left: 50%; 64 padding: 0 1.5em; 65 transform: translate(-50%, -50%); 66 backface-visibility: hidden; 67 width: 100%; 68} 69 70.flip-button .text-back { 71 transform: translate(-50%, -50%) rotateY(180deg); 72} 73 74
668 views
668 views
MIT License