#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} 20 21button:active { 22 transform: scale(0.95); 23 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); 24} 25 26button span { 27 display: block; 28 margin-left: 0.4em; 29 transition: all 0.3s; 30} 31 32button svg { 33 width: 18px; 34 height: 18px; 35 fill: white; 36 transition: all 0.3s; 37} 38 39button .svg-wrapper { 40 display: flex; 41 align-items: center; 42 justify-content: center; 43 width: 30px; 44 height: 30px; 45 border-radius: 50%; 46 background-color: rgba(255, 255, 255, 0.2); 47 margin-right: 0.5em; 48 transition: all 0.3s; 49} 50 51button:hover .svg-wrapper { 52 background-color: rgba(255, 255, 255, 0.5); 53} 54 55button:hover svg { 56 transform: rotate(45deg); 57} 58 59
9.6K views
9.6K views
Comments
Variations
3 MIT License