Button by DeepanshuKant
#e8e8e8
1.btn { 2 position: relative; 3 padding: 1rem 2.5rem; 4 color: #ffd739; 5 font-size: 1em; 6 background-color: #27045b; 7 outline: none; 8 border: none; 9 font-weight: bold; 10 border-radius: 5px; 11 font-family: Verdana, Geneva, Tahoma, sans-serif; 12 transition-property: all; 13 transition-duration: 0.3s; 14 cursor: pointer; 15} 16 17.btn:hover { 18 background-color: #6807f9; 19 box-shadow: 0px 14px 56px -11px #6807f9; 20} 21 22.btn::before { 23 content: ""; 24 position: absolute; 25 height: 5px; 26 width: 5px; 27 background-color: white; 28 border-radius: 100px; 29 right: 2rem; 30 bottom: 37%; 31 animation: 0.5s both ease-in-out infinite; 32} 33 34.btn:hover::before { 35 animation-name: bounce_591; 36 transition: all 0.3s ease; 37} 38 39@keyframes bounce_591 { 40 0% { 41 bottom: 37%; 42 } 43 44 50% { 45 bottom: 70%; 46 } 47 48 100% { 49 bottom: 37%; 50 } 51}
657 views
657 views
MIT License