.btn{ text-transform: uppercase; letter-spacing: 1px; color: #fe6d6d; border-radius: 0; position: relative; } .btn:hover{ color: #fe6d6d; } .btn:after{ content: ""; width: 100%; height: 100%; border: 2px solid #fe6d6d; position: absolute; bottom: 0; left: 0; transition: width 0.2s ease 0s, height 0.2s ease 0.1s, border-top-width 0.1s ease 0.2s, margin 0.2s ease 0s; } .btn:hover:after{ width: 60%; height: 0; border-width: 0 2px 2px; margin: 0 20%; transition: width 0.2s ease 0.2s, height 0.2s ease 0.1s, border-top-width 0.1s ease 0s, margin 0.2s ease 0.2s; } .btn.blue, .btn.blue:hover{ color: #22ace3; } .btn.blue:after{ border-color: #22ace3; } .btn.orange, .btn.orange:hover{ color: #f56f17; } .btn.orange:after{ border-color: #f56f17; } .btn.green, .btn.green:hover{ color: #47cf77; } .btn.green:after{ border-color: #47cf77; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 20px; } }