Button by Fadhilmagass
This button was created for CSS Space Challenge
#212121
1.space-button { 2 display: -webkit-inline-box; 3 display: -ms-inline-flexbox; 4 display: inline-flex; 5 -webkit-box-align: center; 6 -ms-flex-align: center; 7 align-items: center; 8 -webkit-box-pack: center; 9 -ms-flex-pack: center; 10 justify-content: center; 11 padding: 1rem 1.5rem; 12 font-size: 1.25rem; 13 color: #fff; 14 background: -webkit-gradient(linear, left top, right bottom, from(#0a192f), to(#1c3548)); 15 background: linear-gradient(to bottom right, #0a192f, #1c3548); 16 border: none; 17 border-radius: 0.5rem; 18 cursor: pointer; 19 position: relative; 20 overflow: hidden; 21} 22 23.space-button:before { 24 content: ""; 25 position: absolute; 26 top: 50%; 27 left: 50%; 28 -webkit-transform: translate(-50%, -50%); 29 -ms-transform: translate(-50%, -50%); 30 transform: translate(-50%, -50%); 31 width: 0; 32 height: 0; 33 background-color: rgba(255, 255, 255, 0.2); 34 border-radius: 50%; 35 -webkit-transition: width 0.3s ease, height 0.3s ease; 36 transition: width 0.3s ease, height 0.3s ease; 37} 38 39.space-button:hover:before { 40 width: 500px; 41 height: 500px; 42} 43 44.space-button:hover .space-button-icon { 45 -webkit-transform: rotate(360deg); 46 -ms-transform: rotate(360deg); 47 transform: rotate(360deg); 48} 49 50.space-button:hover { 51 background: -webkit-gradient(linear, left top, right bottom, from(#0b5ed7), to(#1c3548)); 52 background: linear-gradient(to bottom right, #0b5ed7, #1c3548); 53} 54 55.space-button:active { 56 background-color: #0642ab; 57} 58 59.space-button-text { 60 margin-right: 0.5rem; 61} 62 63.space-button-icon { 64 width: 1.25rem; 65 height: 1.25rem; 66 fill: currentColor; 67 margin-right: 0.5rem; 68} 69
327 views
327 views
MIT License