.btn{ color: #fff; background-color: #0f251a; font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 700; text-transform: capitalize; letter-spacing: 1px; padding: 10px 20px; border-radius: 0; border: none; position: relative; transition: all 0.5s ease 0s; } .btn:focus, .btn:hover{ color: #fff; background-color: #0f251a; border: none; box-shadow: 0 0 10px rgba(255,69,0,0.9); } .btn:before, .btn:after{ content: ''; border: 4px solid #4f876a; height: 100%; width: 100%; position: absolute; left: 0; bottom: 0; clip-path: polygon(0 5%, 50% 50%, 95% 100%, 0% 100%); transition: all 0.3s ease 0s; } .btn:after{ clip-path: polygon(5% 0, 100% 0, 100% 95%, 50% 50%); } .btn:hover:before{ border-color: #ff4500; clip-path: polygon(95% 0, 0 0, 0 95%, 50% 50%); } .btn:hover:after{ border-color: #ff4500; clip-path: polygon(100% 5%, 100% 100%, 5% 100%, 50% 50%); } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 20px; } }