Button by sabbircoder07
#e8e8e8
1button { 2 font-family: "Lexend Deca", sans-serif; 3 border: none; 4 background-image: linear-gradient(to right top, #5FFBF1,#D16BA5,#86A8E7); 5 color: #ffffff; 6 font-size: 17px; 7 text-transform: capitalize; 8 letter-spacing: 1px; 9 padding: 13px 26px; 10 cursor: pointer; 11 transform: skew(15deg); 12 transition: all 1s; 13} 14 15.main-text { 16 display: inline-block; 17 transform: skew(-15deg); 18} 19 20button:hover { 21 transform: translateY(-3px); 22 background-image: linear-gradient(to bottom, #D16BA5,#86A8E7,#5FFBF1); 23 border-radius: 26px; 24 animation: pulsate 1s infinite; 25} 26 27button:hover span { 28 display: inline-block; 29 transform: translateX(2px); 30 transition: all 1s; 31} 32 33button:focus { 34 outline: none; 35 border-radius: 26px; 36 animation: pulsate 1s infinite; 37} 38 39@keyframes pulsate { 40 0% { 41 transform: scale(1); 42 box-shadow: none; 43 } 44 45 50% { 46 transform: scale(1.03); 47 box-shadow: 0 16px 16px rgba(0, 0, 0, 0.4); 48 } 49 50 100% { 51 transform: scale(1); 52 box-shadow: none; 53 } 54}
673 views
673 views
MIT License