This post is saved as a draft.
#212121
1button { 2 font-family: 'Poppins', sans-serif; 3 letter-spacing: 2px; 4 background: none; 5 color: white; 6 position: relative; 7 outline: none; 8 border: none; 9 height: 50px; 10 width: 190px; 11 font-size: 14px; 12 z-index: 2; 13 transition: 0.01s 0.23s ease-out all; 14 overflow: hidden; 15} 16 17button:before { 18 content: ""; 19 position: absolute; 20 left: 0; 21 top: 0; 22 height: 100%; 23 width: 55%; 24 background: #303030; 25 z-index: -1; 26 transition: 0.3s ease-in all; 27} 28 29button:after { 30 content: ""; 31 position: absolute; 32 left: -5%; 33 top: 5%; 34 height: 90%; 35 width: 5%; 36 background: white; 37 transition: 0.4s 0.02s ease-in all; 38} 39 40button:hover { 41 cursor: pointer; 42 color: transparent; 43} 44 45button:hover:before { 46 left: 120%; 47 width: 25%; 48} 49 50button:hover:after { 51 left: 100%; 52 width: 70%; 53} 54 55button:hover > .icon-right.after:after { 56 left: -80px; 57 color: white; 58 transition: 0.2s 0.2s ease all; 59} 60 61button:hover > .icon-right.after:before { 62 left: -104px; 63 top: 14px; 64 opacity: 0.2; 65 color: white; 66} 67 68.icon-right { 69 position: absolute; 70 top: 0; 71 right: 0; 72} 73 74.icon-right:after { 75 font-family: "FontAwesome"; 76 content: "→"; 77 font-size: 24px; 78 display: inline-block; 79 position: relative; 80 top: 26px; 81 transform: translate3D(0, -55%, 0); 82} 83 84.icon-right.after:after { 85 left: -250px; 86 color: black; 87 transition: 0.15s 0.25s ease left, 0.5s 0.05s ease color; 88} 89 90.icon-right.after:before { 91 content: "Click Me!"; 92 position: absolute; 93 left: -230px; 94 top: 14px; 95 opacity: 0; 96 transition: 0.2s ease-in all; 97} 98 99.signature { 100 position: fixed; 101 font-family: sans-serif; 102 font-weight: 100; 103 bottom: 10px; 104 left: 0; 105 letter-spacing: 4px; 106 font-size: 10px; 107 width: 100%; 108 text-align: center; 109 color: white; 110 text-transform: uppercase; 111 text-decoration: none; 112}
Variation of abutton
Variation of abutton