Button by Kenny10000
#e8e8e8
1.btn-76, 2.btn-76 *, 3.btn-76 :after, 4.btn-76 :before, 5.btn-76:after, 6.btn-76:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10.btn-76 { 11 -webkit-tap-highlight-color: transparent; 12 -webkit-appearance: button; 13 background-color: #000; 14 background-image: none; 15 color: #fff; 16 cursor: pointer; 17 font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 18 Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 19 Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 20 font-size: 100%; 21 line-height: 1.5; 22 margin: 0; 23 padding: 0; 24} 25.btn-76:disabled { 26 cursor: default; 27} 28.btn-76:-moz-focusring { 29 outline: auto; 30} 31.btn-76 svg { 32 display: block; 33} 34.btn-76 [hidden] { 35 display: none; 36} 37.btn-76 { 38 --neon: #0ea5e9; 39 box-sizing: border-box; 40 display: block; 41 font-weight: 900; 42 outline: 4px solid #fff; 43 outline-offset: -4px; 44 overflow: hidden; 45 padding: 1.2rem 3rem; 46 position: relative; 47 text-transform: uppercase; 48 transition: 0.2s linear 0.1s; 49} 50.btn-76:hover { 51 background: var(--neon); 52 box-shadow: 0 0 5px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon), 53 0 0 100px var(--neon); 54 color: #fff; 55 outline-color: transparent; 56 transition: 0.2s linear 0.6s; 57} 58.btn-76 span { 59 display: block; 60 inset: 0; 61 position: absolute; 62} 63.btn-76 .top { 64 border-top: 4px solid var(--neon); 65 opacity: 0; 66 transform: translateX(calc(-100% + var(--progress, 0%))); 67 transition: none; 68} 69.btn-76:hover .top { 70 --progress: 100%; 71 opacity: 1; 72 transition: transform 0.2s linear; 73} 74.btn-76 .right { 75 border-right: 4px solid var(--neon); 76 opacity: 0; 77 transform: translateY(calc(-100% + var(--progress, 0%))); 78 transition: none; 79} 80.btn-76:hover .right { 81 --progress: 100%; 82 opacity: 1; 83 transition: transform 0.2s linear 0.2s; 84} 85.btn-76 .bottom { 86 border-bottom: 4px solid var(--neon); 87 opacity: 0; 88 transform: translateX(calc(100% - var(--progress, 0%))); 89 transition: none; 90} 91.btn-76:hover .bottom { 92 --progress: 100%; 93 opacity: 1; 94 transition: transform 0.2s linear 0.4s; 95} 96.btn-76 .left { 97 border-left: 4px solid var(--neon); 98 opacity: 0; 99 transform: translateY(calc(100% - var(--progress, 0%))); 100 transition: none; 101} 102.btn-76:hover .left { 103 --progress: 100%; 104 opacity: 1; 105 transition: transform 0.2s linear 0.6s; 106} 107
112 views
112 views
MIT License