This post is saved as a draft.
#e8e8e8
1button { 2 position: relative; 3 width: 150px; 4 height: 50px; 5 box-shadow: 0 5px 25px rgba(0, 0,0, .25); 6 border: none; 7} 8 9button span { 10 position: absolute; 11 top: 0; 12 left: 0; 13 width: 100%; 14 height: 100%; 15 color: #fff; 16 background: #002faf; 17 display: flex; 18 justify-content: center; 19 align-items: center; 20 text-transform: uppercase; 21 letter-spacing: 2px; 22 font-size: 17px; 23} 24 25button span:nth-child(2) { 26 background: #fff; 27 color: #002ba0; 28 overflow: hidden; 29 z-index: 2; 30 transition: .5s; 31 clip-path: polygon(50% 0%, 100% 0%,100% 100%,50% 100%,50% 53%); 32} 33 34button span:nth-child(2):hover { 35 clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, 0 50%); 36} 37 38button span:nth-child(1):hover ~ span:nth-child(2) { 39 clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%, 100%50%); 40}
Variation of abutton
Variation of abutton