This post is saved as a draft.
#212121
1.btn { 2 font-size: 17px; 3 background: transparent; 4 border: none; 5 padding: 1em 1.5em; 6 color: #f8f8f8; 7 text-transform: uppercase; 8 position: relative; 9 transition: .5s ease; 10 cursor: pointer; 11} 12 13.btn::before { 14 content: ''; 15 position: absolute; 16 right: 0; 17 top: 0; 18 height: 2px; 19 width: 0; 20 background-color: #f8f8f8; 21 transition: .5s ease; 22} 23 24.btn:hover { 25 color: #181818; 26 transition-delay: .5s; 27} 28 29.btn:hover::before { 30 width: 100%; 31} 32 33.btn::after { 34 content: ''; 35 position: absolute; 36 left: 0; 37 bottom: 0; 38 height: 0; 39 width: 100%; 40 background-color: #f8f8f8; 41 transition: .4s ease; 42 z-index: -1; 43} 44 45.btn:hover::after { 46 height: 100%; 47 transition-delay: 0.4s; 48}
Variation of abutton
Variation of abutton