Button by KhaledMatalkah
#212121
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: transparent; 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-style: solid; 16 border: none; 17 color: white; 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} 30 31.button:before { 32 left: 90%; 33 background: linear-gradient(130deg, rgb(6, 193, 255), rgb(255, 255, 255), rgba(253, 28, 197, 0.985)); 34 z-index: -1; 35 transition: left 0.3s ease-in-out; 36} 37 38.button:hover:before { 39 left: 50%; 40} 41 42.button:after { 43 right: 90%; 44 background: linear-gradient(130deg, rgb(6, 193, 255), rgb(255, 255, 255), rgba(253, 28, 197, 0.985)); 45 z-index: -1; 46 transition: right 0.3s ease-in-out; 47} 48 49.button:hover:after { 50 right: 50%; 51} 52 53
309 views
Variation of abutton
MIT License