Button by KhaledMatalkah
#212121
1.button { 2 display: inline-block; 3 padding: 15px 32px; 4 font-size: 17px; 5 font-weight: bold; 6 color: #fff; 7 background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636); 8 border-radius: 50px; 9 text-align: center; 10 text-decoration: none; 11 cursor: pointer; 12 position: relative; 13 overflow: hidden; 14 z-index: 1; 15 border: none; 16 border-style: solid; 17 border-width: 2px; 18} 19 20.button:before, 21.button:after { 22 content: ""; 23 position: absolute; 24 top: 0; 25 width: 100%; 26 height: 100%; 27 opacity: 0.3; 28 pointer-events: none; 29 transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; 30} 31 32.button:before { 33 left: 100%; 34 background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636); 35 z-index: -1; 36} 37 38.button:hover:before { 39 transform: translateX(-50%); 40 opacity: 1; 41} 42 43.button:after { 44 right: 100%; 45 background: linear-gradient(130deg, #ff6b6b, #c94d4d, #8e3636); 46 z-index: -1; 47} 48 49.button:hover:after { 50 transform: translateX(50%); 51 opacity: 1; 52} 53 54.button:hover .button-text { 55 transform: translateY(-3px); 56} 57 58.button-text { 59 transition: transform 0.3s ease-in-out; 60} 61
339 views
339 views
MIT License