.btn{ color: #333; font-family: 'Arimo', sans-serif; font-size: 22px; font-weight: 800; text-transform: capitalize; letter-spacing: 1px; padding: 7px 15px; border: none; border-radius: 10px; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s; } .btn:hover{ color: #fff; box-shadow: 5px 5px 5px rgba(0,0,0,0.3); } .btn:before, .btn:after, .btn span:before, .btn span:after{ content: ""; background-color: #341f97; height: 3px; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; transition: all .2s cubic-bezier(0.77, 0, 0.175, 1); } .btn:after{ top: auto; bottom: 0; } .btn:hover:before, .btn:hover:after{ height: 27%; } .btn span{ display: block; } .btn span:before, .btn span:after{ height: 50%; width: 3px; transform: translateY(-50%); position: absolute; left: 0; top: 50%; z-index: -1; transition: all .4s cubic-bezier(0.77, 0, 0.175, 1); } .btn span:after{ left: auto; right: 0; } .btn:hover span:before, .btn:hover span:after{ width: 50%; } .btn.green:before, .btn.green:after, .btn.green span:before, .btn.green span:after{ background-color: #10ac84; } .btn.blue:before, .btn.blue:after, .btn.blue span:before, .btn.blue span:after{ background-color: #2e86de; } .btn.red:before, .btn.red:after, .btn.red span:before, .btn.red span:after{ background-color: #ee5253; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 20px; } }