CSS Button Hover Effect

Open In Editor Publish Your Code Need a Website?

body {
    background: #44A08D;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #093637, #44A08D);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #093637, #44A08D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
}
.btn {
    cursor: pointer;
    position: relative;
    padding: 10px 20px;
    background: rgb(3, 247, 226);
    font-size: 28px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: all 1s;
}
.btn:after, .btn:before {
    content: " ";
    width: 10px;
    height: 10px;
    position: absolute;
    border: 0px solid #fff;
    transition: all 1s;
}
.btn:after {
    top: -1px;
    left: -1px;
    border-top: 5px solid black;
    border-left: 5px solid black;
}
.btn:before {
    bottom: -1px;
    right: -1px;
    border-bottom: 5px solid black;
    border-right: 5px solid black;
}
.btn:hover {
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.btn:hover:before, .btn:hover:after {
    width: 100%;
    height: 100%;
}
.data-container {
    background: #ffebee;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS Button Hover Effect

Recommended

Comic button

Responsive CSS Navbar

Animated Login Form HTML CSS

HTML

CSS

JS

Recommended

Comic button

Responsive CSS Navbar

Animated Login Form HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS