Набор интересных эффектов для кнопок (наведение / клик)

01.11.2021

Подборка визуальных эффектов с минимум CSS кода. Реакции на наведение / клик, ввод текста.

.grow:hover {
    transform: scale(1.1);
}

<button class="button shrink">Shrink</button>

.grow:hover {
    transform: scale(1.1);
}

<button class="button opacity">Opacity</button>

.opacity {
    opacity: 0.5;
}
.opacity:hover {
    opacity: 1;
}

<button class="button rotate">Rotate</button>

.rotate:hover {
    transform: rotateZ(-30deg);
}

<button class="button circle">Circle</button>

.circle:hover {
    border-radius: 50%;
}

<button class="button shadow">Shadow</button>

.shadow:hover {
    box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea;
    transform: translateX(-3px);
}

<button class="button swing">Swing</button>

@keyframes swing {
    15% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65% {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

<button class="button ripple">Ripple</button>

.ripple {
    box-shadow: 0 0 4px #999;
    outline: none;
    background-position: center;
    transition: background 0.8s;
}
.ripple:hover{
    background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%)
    center/15000%;
    color: white;
}
.ripple:active{
    background-color: #292d3e;
    background-size: 100%;
    transition: background 0s;
}

<button class="button press_down">Press Down</button>

.press_down {
    display: inline-block;
    position: relative;
    color: #1D9AF2;
    background-color: #292D3E;
    border: 1px solid #1D9AF2;
    border-radius: 4px;
    padding: 0 15px;
    cursor: pointer;
    height: 32px;
    font-size: 14px;

}
.press_down:active {
    box-shadow: 0 3px 0 #1D9AF2;
    top: 3px;
}

.press_down {
    display: inline-block;
    position: relative;
    color: #1D9AF2;
    background-color: #292D3E;
    border: 1px solid #1D9AF2;
    border-radius: 4px;
    padding: 0 15px;
    cursor: pointer;
    height: 32px;
    font-size: 14px;

}
.press_down:active {
    box-shadow: 0 3px 0 #1D9AF2;
    top: 3px;
}

Категории: Web, CSS