#e8e8e8
1button { 2 position: relative; 3 display: inline-block; 4 cursor: pointer; 5 outline: none; 6 border: 0; 7 vertical-align: middle; 8 text-decoration: none; 9 background: transparent; 10 padding: 0; 11 font-size: inherit; 12 font-family: inherit; 13} 14 15button.learn-more { 16 width: 12rem; 17 height: auto; 18} 19 20button.learn-more .circle { 21 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 22 position: relative; 23 display: block; 24 margin: 0; 25 width: 3rem; 26 height: 3rem; 27 background: #282936; 28 border-radius: 1.625rem; 29} 30 31button.learn-more .circle .icon { 32 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 33 position: absolute; 34 top: 0; 35 bottom: 0; 36 margin: auto; 37 background: #fff; 38} 39 40button.learn-more .circle .icon.arrow { 41 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 42 left: 0.625rem; 43 width: 1.125rem; 44 height: 0.125rem; 45 background: none; 46} 47 48button.learn-more .circle .icon.arrow::before { 49 position: absolute; 50 content: ""; 51 top: -0.29rem; 52 right: 0.0625rem; 53 width: 0.625rem; 54 height: 0.625rem; 55 border-top: 0.125rem solid #fff; 56 border-right: 0.125rem solid #fff; 57 transform: rotate(45deg); 58} 59 60button.learn-more .button-text { 61 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 62 position: absolute; 63 top: 0; 64 left: 0; 65 right: 0; 66 bottom: 0; 67 padding: 0.75rem 0; 68 margin: 0 0 0 1.85rem; 69 color: #282936; 70 font-weight: 700; 71 line-height: 1.6; 72 text-align: center; 73 text-transform: uppercase; 74} 75 76button:hover .circle { 77 width: 100%; 78} 79 80button:hover .circle .icon.arrow { 81 background: #fff; 82 transform: translate(1rem, 0); 83} 84 85button:hover .button-text { 86 color: #fff; 87}
58K views
58K views
Comments
Variations
1 MIT License