Button by z1789976172
#e8e8e8
1:after,:before { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7.btn--huge { 8 cursor: pointer; 9 position: relative; 10 height: 45px; 11 background-color: #ff4e33; 12 text-transform: uppercase; 13 display: inline-block; 14 color: fff; 15 font-family: Arial; 16 font-weight: 800; 17 font-size: 12px; 18 letter-spacing: 1px; 19 padding: 0 20px 0 50px; 20 white-space: nowrap; 21} 22 23.btn--huge:before { 24 -webkit-transition: cubic-bezier(0.785, 0.135, 0.15, 0.86); 25 transition: all 0.5s cubic-bezier(0.785, 0.15 , 0.15, 0.86); 26 content: ''; 27 position: absolute; 28 top: 0; 29 left: 0; 30 width: 30px; 31 height: 100%; 32 background-color: #D6D4D3; 33} 34 35.btn--huge:after { 36 -webkit-transition: cubic-bezier(0.785, 0.135, 0.15, 0.86); 37 transition: all 0.5s cubic-bezier(0.785, 0.15 , 0.15, 0.86); 38 content: '→'; 39 font-size: 14px; 40 line-height: 1; 41 color: #D6D4D3; 42 position: absolute; 43 left: 20px; 44 top: 50%; 45 width: 22px; 46 height: 22px; 47 margin-top: -11px; 48 background: #FF4E33; 49 z-index: 2; 50 border-radius: 50%; 51 border: 1px solid #D6D4D3; 52} 53 54.btn--huge__text { 55 position: relative; 56 top: -1px; 57 -webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 58 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 59 height: 100%; 60 display: flex; 61 align-items: center; 62} 63 64.btn--huge__text div { 65 position: relative; 66 color: #fff; 67} 68 69.btn--huge__text span { 70 -webkit-transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 71 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 72 overflow: hidden; 73 position: absolute; 74 white-space: nowrap; 75 top: 0; 76 left: 0; 77 color: #000; 78 width: 0; 79} 80 81.btn--huge:hover:after { 82 -webkit-transform: translateX(-30px); 83 transform: translateX(-30px); 84} 85 86.btn--huge:hover:before { 87 width: 0; 88} 89 90.btn--huge:hover .btn--huge__text span { 91 width: 100%; 92}
465 views
465 views
MIT License