1#br__btn { 2 text-transform: uppercase; 3 font-weight: 700; 4 font-size: 1.188rem; 5 padding: .625em 1.25em; 6 position: relative; 7 overflow: hidden; 8 border-radius: .75em; 9 border: 0; 10 color: #fff; 11 --degPrimary: 100.98deg; 12} 13 14#br__gradient { 15 position: absolute; 16 background: conic-gradient(from var(--degPrimary) at 50% 50%, #0E6CB9 -14.31deg, rgba(251, 251, 251, 0.5) 4.98deg, #1F1F1F 90.36deg, #FFFFFF 97.67deg, #151250 288.5deg, #401C73 315.27deg, #0E6CB9 345.69deg, rgba(251, 251, 251, 0.5) 364.98deg); 17 aspect-ratio: 1 / 1; 18 width: 220%; 19 bottom: -320%; 20 left: -110%; 21 border-radius: 50%; 22 z-index: 0; 23 user-select: none; 24 transition: transform 0.5s ease-in; 25} 26 27#br__btn:hover i { 28 transform: rotate(-105deg); 29} 30 31#br__btn:hover span { 32 transform: scale(0.62); 33 transition: 3s ease-in-out; 34} 35 36.star { 37 width: 1px; 38 height: 1px; 39 background-color: white; 40 display: inline-block; 41 position: absolute; 42 top: 0; 43 visibility: hidden; 44} 45 46.star:not(:hover) { 47 transition-duration: 0s; 48} 49 50.star:nth-child(2) { 51 right: 25%; 52} 53 54.star:nth-child(3) { 55 right: 60%; 56} 57 58.star:nth-child(4) { 59 right: 11%; 60} 61 62.star:nth-child(5) { 63 right: 22%; 64} 65 66.star:nth-child(6) { 67 right: 42%; 68} 69 70.star:nth-child(7) { 71 right: 62%; 72} 73 74.star:nth-child(8) { 75 right: 12%; 76} 77 78.star:nth-child(9) { 79 right: 82%; 80} 81 82#br__btn:hover .star { 83 visibility: visible; 84 top: calc(5px * var(--order)/2); 85 transition: top 1s ease-in 2s, 2s visibility ease-in 2s; 86} 87 88#br__btn:not(:hover) .txt { 89 transition-delay: 0.3s; 90 transition-duration: 0.5s; 91} 92 93.txt { 94 position: relative; 95 display: block; 96}
MIT License