Button by fanishah
#212121
1.button { 2 font-family: inherit; 3 background: #2CA0D9; 4 color: white; 5 padding: 0.35em 0; 6 font-size: 17px; 7 border: none; 8 border-radius: 0.7em; 9 letter-spacing: 0.08em; 10 position: relative; 11 display: flex; 12 align-content: center; 13 align-items: center; 14 overflow: hidden; 15 height: 2.5em; 16 padding-left: 2.8em; 17 padding-right: 0.92em; 18} 19 20.button .icon { 21 background: #fff; 22 height: 2em; 23 width: 2em; 24 border-radius: 2em; 25 position: absolute; 26 display: flex; 27 align-items: center; 28 justify-content: center; 29 left: 0.4em; 30 transition: all 0.5s; 31} 32 33.icon svg { 34 margin-left: 0.1em; 35 transition: all 0.5s; 36 color: #2CA0D9; 37 width: 1.2rem; 38 height: 1.2rem; 39} 40 41.button:hover .icon svg { 42 transform: rotate(360deg); 43} 44 45.button:hover .icon { 46 width: calc(100% - 0.85rem); 47 border-radius: 0.5em; 48}
5K views
5K views
MIT License