#212121
1.btn { 2 --btn-gradient: var(--btn-gradient-from),var(--btn-gradient-to); 3 border: 0 none; 4 appearance: none; 5 transition: all .3s; 6 border-radius: 10px; 7 background-color: var(--btn-bg); 8 box-shadow: 0 0 2px 2px var(--btn-shadow), 0 0 4px 4px var(--btn-shadow), 0 0 8px 8px var(--btn-shadow); 9} 10 11.btn, 12.btn * { 13 box-sizing: border-box; 14} 15 16.btn-inner { 17 position: relative; 18 border-radius: inherit; 19 border: 1px solid transparent; 20 font-size: 1rem; 21 display: flex; 22 align-items: center; 23 min-width: 10rem; 24 padding: 1.5rem 2rem; 25 overflow: hidden; 26 color: var(--btn-text-color); 27} 28 29.btn-label { 30 position: absolute; 31 bottom: 1px; 32 left: 1px; 33 right: 1px; 34 top: 1px; 35 border-radius: inherit; 36 z-index: 10; 37 display: flex; 38 justify-content: center; 39 align-items: center; 40 background-color: var(--btn-bg); 41 background-image: linear-gradient(to bottom,var(--btn-gradient)); 42} 43 44.btn:hover { 45 transform: translateY(-5px); 46 letter-spacing: 3px; 47 box-shadow: rgba(0, 131, 253, 0.596) 0px 1px 80px 40px; 48} 49 50.btn:active { 51 border-radius: 40px; 52 transform: translateY(4px); 53 transition: 0.1s; 54 letter-spacing: 3px; 55 box-shadow: rgb(0, 131, 253) 0px 1px 80px 40px; 56} 57 58.btn:active .btn-blur:before { 59 --transition: 0.5s; 60} 61 62.btn--primary { 63 --btn-bg: #111111; 64 --btn-gradient-from: #111111; 65 --btn-gradient-to: rgba(29, 6, 240, 0.5); 66 --btn-text-color: #ffffff; 67 --btn-shadow: #9b14c438; 68} 69 70@keyframes turn { 71 0% { 72 transform: translateY(-50%) rotate(0deg) 73 } 74 75 to { 76 transform: translateY(-50%) rotate(1turn) 77 } 78} 79
521 views
521 views
Comments
MIT License