This post is saved as a draft.
#212121
1a { 2 position: relative; 3 display: inline-block; 4 padding: 15px 30px; 5 border: 2px solid #fefefe; 6 text-transform: uppercase; 7 color: #fefefe; 8 text-decoration: none; 9 font-weight: 600; 10 font-size: 20px; 11} 12 13a::before { 14 content: ''; 15 position: absolute; 16 top: 6px; 17 left: -2px; 18 width: calc(100% + 4px); 19 height: calc(100% - 12px); 20 background-color: #212121; 21 transition: 0.3s ease-in-out; 22 transform: scaleY(1); 23} 24 25a:hover::before { 26 transform: scaleY(0); 27} 28 29a::after { 30 content: ''; 31 position: absolute; 32 left: 6px; 33 top: -2px; 34 height: calc(100% + 4px); 35 width: calc(100% - 12px); 36 background-color: #212121; 37 transition: 0.3s ease-in-out; 38 transform: scaleX(1); 39 transition-delay: 0.5s; 40} 41 42a:hover::after { 43 transform: scaleX(0); 44} 45 46a span { 47 position: relative; 48 z-index: 3; 49} 50 51button { 52 background-color: none; 53 text-decoration: none; 54 background-color: #212121; 55 border: none; 56}
Variation of abutton
Variation of abutton