#212121
1.btn { 2 font-size: 17px; 3 background: transparent; 4 border: none; 5 padding: 1em 1.5em; 6 color: #ffedd3; 7 text-transform: uppercase; 8 position: relative; 9 transition: .5s ease; 10} 11 12.btn::before { 13 content: ''; 14 position: absolute; 15 left: 0; 16 bottom: 0; 17 height: 2px; 18 width: 0; 19 background-color: #ffc506; 20 transition: .5s ease; 21} 22 23.btn:hover { 24 color: #1e1e2b; 25 transition-delay: .5s; 26} 27 28.btn:hover::before { 29 width: 100%; 30} 31 32.btn::after { 33 content: ''; 34 position: absolute; 35 left: 0; 36 bottom: 0; 37 height: 0; 38 width: 100%; 39 background-color: #ffc506; 40 transition: .4s ease; 41 z-index: -1; 42} 43 44.btn:hover::after { 45 height: 100%; 46 transition-delay: 0.4s; 47 color: aliceblue; 48}
12K views
12K views
Comments
MIT License