सीएसएस बटन होवर इफेक्ट

अनुशंसित

30 August 2024

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

31 January 2025

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;
}

सीएसएस बटन होवर इफेक्ट

अनुशंसित

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

बटन अधिक

जुगनू बटन HTML CSS टेलविंड

HTML

CSS

JS

अनुशंसित

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

बटन अधिक

जुगनू बटन HTML CSS टेलविंड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS