#212121
1.button { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 border-radius: 7px; 6 border: none; 7 background: #0ba360; 8 background: linear-gradient( 9 to right, 10 #0ba360,#3cba92 11 ); 12 color: white; 13 font-family: inherit; 14 text-align: center; 15 font-size: 13px; 16 box-shadow: 0px 14px 56px -11px #0ba360; 17 width: 11em; 18 padding: 0.7em; 19 transition: all 0.4s; 20 cursor: pointer; 21} 22 23.button svg { 24 width: 25px; 25 height: 25px; 26} 27 28.button svg path { 29 fill: white 30} 31 32.button span { 33 cursor: pointer; 34 display: inline-block; 35 position: relative; 36 transition: 0.4s; 37} 38 39.button span:after { 40 content: 'for free'; 41 position: absolute; 42 opacity: 0; 43 top: 0; 44 right: -20px; 45 transition: 0.7s; 46} 47 48.button:hover span { 49 padding-right: 3.80em; 50} 51 52.button:hover span:after { 53 opacity: 4; 54 right: 0; 55}
Comments
MIT License