Button by Peary74
#e8e8e8
1button { 2 position: relative; 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 border-radius: 5px; 7 background: #fd1853; 8 font-family: "Montserrat", sans-serif; 9 overflow: hidden; 10 border: none; 11} 12 13button:after { 14 content: " "; 15 width: 0%; 16 height: 100%; 17 background: #fff; 18 position: absolute; 19 transition: all 0.4s ease-in-out; 20 right: 0; 21} 22 23button:hover::after { 24 right: auto; 25 left: 0; 26 width: 100%; 27} 28 29button span { 30 text-align: center; 31 text-decoration: none; 32 width: 100%; 33 padding: 18px 25px; 34 color: #fffcfd; 35 font-size: 1.125em; 36 font-weight: 700; 37 letter-spacing: 0.3em; 38 z-index: 20; 39 transition: all 0.3s ease-in-out; 40} 41 42button:hover span { 43 animation: scaleUp 0.3s ease-in-out; 44 color: #fd1853; 45} 46 47button:hover { 48 animation: scaleUp 0.3s ease-in-out; 49} 50 51@keyframes scaleUp { 52 0% { 53 transform: scale(1); 54 } 55 56 50% { 57 transform: scale(0.95); 58 } 59 60 100% { 61 transform: scale(1); 62 } 63} 64 65.star-1 { 66 position: absolute; 67 top: 20%; 68 left: 20%; 69 width: 25px; 70 height: auto; 71 filter: drop-shadow(0 0 0 #fd1853); 72 z-index: -5; 73 transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); 74} 75 76.star-2 { 77 position: absolute; 78 top: 45%; 79 left: 45%; 80 width: 15px; 81 height: auto; 82 filter: drop-shadow(0 0 0 #fd1853); 83 z-index: -5; 84 transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 85} 86 87.star-3 { 88 position: absolute; 89 top: 40%; 90 left: 40%; 91 width: 5px; 92 height: auto; 93 filter: drop-shadow(0 0 0 #fd1853); 94 z-index: -5; 95 transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 96} 97 98.star-4 { 99 position: absolute; 100 top: 20%; 101 left: 40%; 102 width: 8px; 103 height: auto; 104 filter: drop-shadow(0 0 0 #fd1853); 105 z-index: -5; 106 transition: all .8s cubic-bezier(0, 0.4, 0, 1.01); 107} 108 109.star-5 { 110 position: absolute; 111 top: 25%; 112 left: 45%; 113 width: 15px; 114 height: auto; 115 filter: drop-shadow(0 0 0 #fd1853); 116 z-index: -5; 117 transition: all .6s cubic-bezier(0, 0.4, 0, 1.01); 118} 119 120.star-6 { 121 position: absolute; 122 top: 5%; 123 left: 50%; 124 width: 5px; 125 height: auto; 126 filter: drop-shadow(0 0 0 #fd1853); 127 z-index: -5; 128 transition: all .8s ease; 129} 130 131button:hover .star-1 { 132 position: absolute; 133 top: -2%; 134 left: 0%; 135 width: 25px; 136 height: auto; 137 filter: drop-shadow(0 0 10px #fd1853); 138 z-index: 2; 139} 140 141button:hover .star-2 { 142 position: absolute; 143 top: 34%; 144 left: 41.5%; 145 width: 15px; 146 height: auto; 147 filter: drop-shadow(0 0 10px #fd1853); 148 z-index: 2; 149} 150 151button:hover .star-3 { 152 position: absolute; 153 top: 55%; 154 left: 25%; 155 width: 5px; 156 height: auto; 157 filter: drop-shadow(0 0 10px #fd1853); 158 z-index: 2; 159} 160 161button:hover .star-4 { 162 position: absolute; 163 top: 0%; 164 left: 55%; 165 width: 8px; 166 height: auto; 167 filter: drop-shadow(0 0 10px #fd1853); 168 z-index: 2; 169} 170 171button:hover .star-5 { 172 position: absolute; 173 top: 25%; 174 left: 85%; 175 width: 15px; 176 height: auto; 177 filter: drop-shadow(0 0 10px #fd1853); 178 z-index: 2; 179} 180 181button:hover .star-6 { 182 position: absolute; 183 top: 75%; 184 left: 60%; 185 width: 5px; 186 height: auto; 187 filter: drop-shadow(0 0 10px #fd1853); 188 z-index: 2; 189} 190 191
945 views
945 views
MIT License