Button by Saad3092003
#212121
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 box-shadow: 0 0 5px 1px white; 23 position: relative; 24 display: block; 25 margin: 0; 26 width: 3rem; 27 height: 3rem; 28 background: #282936; 29 border-radius: 1.625rem; 30} 31 32button.learn-more .circle .icon { 33 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 34 position: absolute; 35 top: 0; 36 bottom: 0; 37 margin: auto; 38 background: #fff; 39} 40 41button.learn-more .circle .icon.arrow { 42 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 43 left: 0.625rem; 44 width: 1.125rem; 45 height: 0.125rem; 46 background: none; 47} 48 49button.learn-more .circle .icon.arrow::before { 50 position: absolute; 51 content: ""; 52 top: -0.29rem; 53 right: 0.0625rem; 54 width: 0.625rem; 55 height: 0.625rem; 56 border-top: 0.125rem solid #fff; 57 border-right: 0.125rem solid #fff; 58 transform: rotate(45deg); 59} 60 61button.learn-more .button-text { 62 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 63 position: absolute; 64 top: 0; 65 left: 0; 66 right: 0; 67 bottom: 0; 68 padding: 0.75rem 0; 69 margin: 0 0 0 1.85rem; 70 color: rgba(255, 255, 255, 0.493); 71 font-weight: 700; 72 line-height: 1.6; 73 text-align: center; 74 text-transform: uppercase; 75} 76 77button:hover .circle { 78 width: 100%; 79 box-shadow: 0 0 10px 2px white; 80} 81 82button:hover .button-text { 83 transform: translate(-1.7rem, 0); 84} 85 86button:hover .circle .icon.arrow { 87 background: #fff; 88 transform: translate(8.7rem, 0); 89} 90 91button:active .circle .icon.arrow { 92 transform: translate(9.5rem, 0); 93 transition: all 0.3s; 94} 95 96button:active .circle { 97 transform: scale(0.9); 98 transition: all 0.3s; 99 box-shadow: 0 0 5px 0.5px white; 100} 101 102button:hover .button-text { 103 color: #fff; 104} 105 106button:active .button-text { 107 color: rgba(255, 255, 255, 0.459); 108}
1.6K views
Variation of abutton
MIT License