Efecto de desplazamiento del botón con CSS

Abrir en el editor Video Publica tu código

Recomendado

18 May 2025

Un código de youssefdahroug2005

27 November 2024

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

Efecto de desplazamiento del botón con CSS

Recomendado

Un código de youssefdahroug2005

Efecto cajón

Menú de Pestañas en JavaScrip

HTML

CSS

JS

Recomendado

Un código de youssefdahroug2005

Efecto cajón

Menú de Pestañas en JavaScrip

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS