#e8e8e8
1.Btn { 2 width: 150px; 3 height: 50px; 4 border: none; 5 color: white; 6 font-weight: 600; 7 font-size: 13.5px; 8 position: relative; 9 overflow: hidden; 10 border-radius: 40px; 11 cursor: pointer; 12 background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6); 13 background-size: 1000% 1000%; 14 animation: gradient 5s ease infinite; 15 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.247); 16 transition-duration: .1s; 17} 18/* Button's gradient animation */ 19@keyframes gradient { 20 0% { 21 background-position: 0 50%; 22 } 23 24 50% { 25 background-position: 100% 50%; 26 } 27 28 100% { 29 background-position: 0 50%; 30 } 31} 32/* Effect on Hover*/ 33.Btn::before { 34 content: ""; 35 position: absolute; 36 width: 50px; 37 height: 100%; 38 left: -70px; 39 top: 0; 40 background-color: rgba(214, 199, 255, 0.329); 41 filter: blur(10px); 42 transition-duration: .3s; 43 border-top-left-radius: 50%; 44 border-bottom-right-radius: 50%; 45} 46 47.Btn:hover::before { 48 transform: translateX(250px); 49 transition-duration: .3s; 50} 51/* Effect on click */ 52.Btn:active { 53 transform: translate(2px,2px); 54 transition-duration: .1s; 55}
681 views
681 views
Comments
MIT License