#e8e8e8
1button { 2 font-family: inherit; 3 font-size: 18px; 4 background: linear-gradient(to bottom, #4dc7d9 0%,#66a6ff 100%); 5 color: white; 6 padding: 0.8em 1.2em; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 border: none; 11 border-radius: 25px; 12 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); 13 transition: all 0.3s; 14} 15 16button:hover { 17 transform: translateY(-3px); 18 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); 19 padding: 0em; 20 background: linear-gradient(to bottom, #5bd9ec 0%,#97c3ff 100%); 21 cursor: pointer; 22} 23 24button:active { 25 transform: scale(0.95); 26 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); 27} 28 29button span { 30 display: block; 31 margin-left: 0.4em; 32 transition: all 0.3s; 33} 34 35button:hover span { 36 scale: 0; 37 font-size: 0%; 38 opacity: 0; 39 transition: all 0.5s; 40} 41 42button svg { 43 width: 18px; 44 height: 18px; 45 fill: white; 46 transition: all 0.3s; 47} 48 49button .svg-wrapper { 50 display: flex; 51 align-items: center; 52 justify-content: center; 53 width: 30px; 54 height: 30px; 55 border-radius: 50%; 56 background-color: rgba(255, 255, 255, 0.2); 57 transition: all 0.3s; 58} 59 60button:hover .svg-wrapper { 61 background-color: rgba(43, 169, 228, 0.897); 62 width: 54px; 63 height: 54px; 64} 65 66button:hover svg { 67 width: 25px; 68 height: 25px; 69 margin-right: 5px; 70 transform: rotate(45deg); 71} 72 73
Comments
MIT License