1button { 2 --min-width: 180px; 3 --min-height: 42px; 4 --ring-min-size: 20px; 5 --ring-max-size: 150px; 6 --ring-width: 3px; 7 --main-bg-color: #814fd1; 8 --gradient-bg-color-1: rgb(222, 203, 226); 9 --gradient-bg-color-2: rgb(79, 131, 209); 10 --ring-color: #6f00ff; 11 --shadow-color: rgba(79, 99, 209, 0.64); 12 --hover-shadow-color: rgba(79, 99, 209, 0.64); 13 --main-fg-color: #313133; 14 --hover-fg-color: rgb(38, 11, 53); 15 min-width: var(--min-width); 16 min-height: var(--min-height); 17 font-size: 17px; 18 text-transform: uppercase; 19 font-weight: 600; 20 color: var(--main-fg-color); 21 background: var(--main-bg-color); 22 background: linear-gradient(66deg, var(--gradient-bg-color-1) 0%, var(--gradient-bg-color-2) 100%); 23 border: none; 24 border-radius: 999px; 25 box-shadow: 12px 2px 24px var(--shadow-color); 26 transition: all 0.3s ease-in-out 0s; 27 cursor: pointer; 28 outline: none; 29 position: relative; 30 padding: 10px; 31} 32 33button::before { 34 content: ''; 35 border-radius: 999px; 36 min-width: calc(var(--min-width) + 12px); 37 min-height: calc(var(--min-height) + 12px); 38 border: var(--ring-width) solid var(--ring-color); 39 box-shadow: 0 0 60px var(--hover-shadow-color); 40 position: absolute; 41 top: 50%; 42 left: 50%; 43 transform: translate(-50%, -50%); 44 opacity: 0; 45 transition: all .3s ease-in-out 0s; 46} 47 48button:hover, .button:focus { 49 color: var(--hover-fg-color); 50 transform: translateY(-6px); 51} 52 53button:active { 54 color: var(--main-fg-color); 55 transform: scale(0.95); 56} 57 58button:active::before { 59 border: 0px solid var(--ring-color); 60} 61 62button:hover::before, button:focus::before { 63 opacity: 1; 64} 65 66/* ring */ 67button::after { 68 content: ''; 69 width: var(--ring-min-size); 70 height: var(--ring-min-size); 71 border-radius: 100%; 72 border: var(--ring-width) solid var(--ring-color); 73 position: absolute; 74 z-index: -1; 75 top: 50%; 76 left: 50%; 77 transform: translate(-50%, -50%); 78 animation: ring 1.5s infinite; 79} 80 81button:hover::after, button:focus::after { 82 animation: none; 83 display: none; 84} 85 86@keyframes ring { 87 0% { 88 width: var(--ring-min-size); 89 height: var(--ring-min-size); 90 opacity: 0.5; 91 } 92 93 100% { 94 width: var(--ring-max-size); 95 height: var(--ring-max-size); 96 opacity: 0; 97 } 98}
MIT License