Button by KapeParaguay
#212121
1.buttonpro { 2 --btn-default-bg: black; 3 --btn-padding: 15px 20px; 4 --btn-hover-bg: green; 5 --btn-transition: 0.3s; 6 --btn-letter-spacing: 0.1rem; 7 --btn-animation-duration: 1.2s; 8 --btn-shadow-color: green; 9 --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color); 10 --hover-btn-color: #7241ff; 11 --default-btn-color: #fff; 12 --font-size: 16px; 13 --font-weight: 600; 14 --font-family: Menlo, Roboto Mono, monospace; 15 border-radius: 6em; 16} 17 18/* button settings π */ 19 20.buttonpro { 21 box-sizing: border-box; 22 padding: var(--btn-padding); 23 display: flex; 24 align-items: center; 25 justify-content: center; 26 color: var(--default-btn-color); 27 font: var(--font-weight) var(--font-size) var(--font-family); 28 background: var(--btn-default-bg); 29 cursor: pointer; 30 transition: var(--btn-transition); 31 overflow: hidden; 32 box-shadow: var(--btn-shadow); 33 border-radius: 6em; 34 border: 2px solid #2a2b3a; 35} 36 37.buttonpro span { 38 letter-spacing: var(--btn-letter-spacing); 39 transition: var(--btn-transition); 40 box-sizing: border-box; 41 position: relative; 42 background: inherit; 43} 44 45.buttonpro span::before { 46 box-sizing: border-box; 47 position: absolute; 48 content: ""; 49 background: inherit; 50} 51.buttonpro:focus { 52 scale: 1.09; 53} 54.buttonpro:hover, 55.buttonpro:focus { 56 background: var(--btn-default-bg); 57 box-shadow: 0px 0px 10px 0px rgba(119, 68, 255, 0.7); 58 border: 2px solid rgb(9, 255, 0); 59} 60 61.buttonpro:hover span, 62.buttonpro:focus span { 63 color: rgb(9, 255, 0); 64} 65 66.buttonpro:hover span::before, 67.buttonpro:focus span::before { 68 animation: chitchat linear both var(--btn-animation-duration); 69} 70 71@keyframes chitchat { 72 0% { 73 content: "#"; 74 } 75 76 5% { 77 content: "."; 78 } 79 80 10% { 81 content: "^{"; 82 } 83 84 15% { 85 content: "-!"; 86 } 87 88 20% { 89 content: "#$_"; 90 } 91 92 25% { 93 content: "β:0"; 94 } 95 96 30% { 97 content: "#{+.";}35%{content: "@}-?"; 98 } 99 100 40% { 101 content: "?{4@%"; 102 } 103 104 45% { 105 content: "=.,^!"; 106 } 107 108 50% { 109 content: "?2@%"; 110 } 111 112 55% { 113 content: "\;1}]"; 114 } 115 116 60% { 117 content: "?{%:%"; 118 right: 0; 119 } 120 121 65% { 122 content: "|{f[4"; 123 right: 0; 124 } 125 126 70% { 127 content: "{4%0%"; 128 right: 0; 129 } 130 131 75% { 132 content: "'1_0<"; 133 right: 0; 134 } 135 136 80% { 137 content: "{0%"; 138 right: 0; 139 } 140 141 85% { 142 content: "]>'"; 143 right: 0; 144 } 145 146 90% { 147 content: "4"; 148 right: 0; 149 } 150 151 95% { 152 content: "2"; 153 right: 0; 154 } 155 156 100% { 157 content: ""; 158 right: 0; 159 } 160} 161
Β
337 views
Variation of abutton
MIT License