Button by Custyyyy
#e8e8e8
1.button { 2 display: inline-block; 3 border-radius: 7px; 4 border: none; 5 background: #1875FF; 6 color: white; 7 font-family: inherit; 8 text-align: center; 9 font-size: 13px; 10 box-shadow: 0px 14px 56px -11px #1875FF; 11 width: 10em; 12 padding: 1em; 13 transition: all 0.4s; 14 cursor: pointer; 15} 16 17.button span { 18 cursor: pointer; 19 display: inline-block; 20 position: relative; 21 transition: 0.4s; 22} 23 24.button span:after { 25 content: 'for free'; 26 position: absolute; 27 opacity: 0; 28 top: 0; 29 right: -20px; 30 transition: 0.7s; 31} 32 33.button:hover span { 34 padding-right: 3.55em; 35} 36 37.button:hover span:after { 38 opacity: 4; 39 right: 0; 40}
14K views
14K views
Variations
1 MIT License