Button by doniaskima
#e8e8e8
1.btn-23, 2.btn-23 *, 3.btn-23 :after, 4.btn-23 :before, 5.btn-23:after, 6.btn-23:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-23 { 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-23:disabled { 31 cursor: default; 32} 33 34.btn-23:-moz-focusring { 35 outline: auto; 36} 37 38.btn-23 svg { 39 display: block; 40 vertical-align: middle; 41} 42 43.btn-23 [hidden] { 44 display: none; 45} 46 47.btn-23 { 48 border-radius: 99rem; 49 border-width: 2px; 50 overflow: hidden; 51 padding: 0.8rem 3rem; 52 position: relative; 53} 54 55.btn-23 span { 56 display: grid; 57 inset: 0; 58 place-items: center; 59 position: absolute; 60 transition: opacity 0.2s ease; 61} 62 63.btn-23 .marquee { 64 --spacing: 5em; 65 --start: 0em; 66 --end: 5em; 67 -webkit-animation: marquee 1s linear infinite; 68 animation: marquee 1s linear infinite; 69 -webkit-animation-play-state: paused; 70 animation-play-state: paused; 71 opacity: 0; 72 position: relative; 73 text-shadow: #fff var(--spacing) 0, #fff calc(var(--spacing) * -1) 0, 74 #fff calc(var(--spacing) * -2) 0; 75} 76 77.btn-23:hover .marquee { 78 -webkit-animation-play-state: running; 79 animation-play-state: running; 80 opacity: 1; 81} 82 83.btn-23:hover .text { 84 opacity: 0; 85} 86 87@-webkit-keyframes marquee { 88 0% { 89 transform: translateX(var(--start)); 90 } 91 92 to { 93 transform: translateX(var(--end)); 94 } 95} 96 97@keyframes marquee { 98 0% { 99 transform: translateX(var(--start)); 100 } 101 102 to { 103 transform: translateX(var(--end)); 104 } 105} 106
4.2K views
4.2K views
MIT License