Button by doniaskima
#e8e8e8
1.btn-27, 2.btn-27 *, 3.btn-27 :after, 4.btn-27 :before, 5.btn-27:after, 6.btn-27:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-27 { 12 -webkit-tap-highlight-color: transparent; 13 -webkit-appearance: button; 14 background-color: #000; 15 background-image: none; 16 color: #fff; 17 cursor: pointer; 18 font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 19 Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 20 Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 21 font-size: 100%; 22 font-weight: 900; 23 line-height: 1.5; 24 margin: 0; 25 -webkit-mask-image: -webkit-radial-gradient(#000, #fff); 26 padding: 0; 27 text-transform: uppercase; 28} 29 30.btn-27:disabled { 31 cursor: default; 32} 33 34.btn-27:-moz-focusring { 35 outline: auto; 36} 37 38.btn-27 svg { 39 display: block; 40 vertical-align: middle; 41} 42 43.btn-27 [hidden] { 44 display: none; 45} 46 47.btn-27 { 48 --tilt: 40deg; 49 background: none; 50 -webkit-mask-image: none; 51 padding: 2rem 5rem; 52 perspective: 500px; 53 transform-style: preserve-3d; 54} 55 56.btn-27 .text-container { 57 background: #fff; 58 display: grid; 59 inset: 0; 60 place-items: center; 61 position: absolute; 62 transform-origin: center center; 63 transition: transform 0.2s; 64} 65 66.btn-27 .text { 67 color: #000; 68} 69 70.btn-27:hover .text-container:first-child { 71 transform: rotateY(var(--tilt)); 72} 73 74.btn-27:hover .text-container:nth-child(2) { 75 transform: rotateY(calc(var(--tilt) * -1)); 76} 77
395 views
395 views
MIT License