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