Buttons hover effects

If you need any website related work done, feel free to contact us.

Live Code Editor

HTML

CSS

body {
    --primary: 25, 91, 255;
    --color: 44, 62, 80;
    justify-content: center;
    background: #f4f7f8;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    color: rgb(var(--color));
    text-align: center;
    top: 50%;
    position: relative;
}
    * {
        list-style: none;
        outline: none;
        padding: 0;
        margin: 0;
        font-family: 'Poppins', sans-serif;
        box-sizing: border-box;
    }
button {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border: 0px;
    background: transparent;
    position: relative;
    margin: 10px;
    transition: all .25s ease;
}
    .btn-6 {
        border: 3px solid #000;
        transform: skew(20deg);
        overflow: hidden;
        backface-visibility: hidden;
    }
    .btn-6:hover > span {
        opacity: 0;
        transform: scale(.5);
    }
    .btn-6:hover .effect {
        transform: translate(0);
    }
    .btn-6 .effect {
        position: absolute;
        background: #000;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        color: #fff;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(0,-100%);
        transition: all .25s ease;
        backface-visibility: hidden;
    }
    .btn-6 span {
        transform: skew(-20deg);
        display: block;
        transition: all .25s ease;
    }
    .btn-5:hover {
        color: #fff;
    }
    .btn-5:hover::after {
        transform: scale(1);
        opacity: 1;
    }
    .btn-5::after {
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 30px;
        position: absolute;
        top: 0px;
        left: 0px;
        transform: scale(.1);
        background: #000;
        z-index: -1;
        opacity: 0;
        transition: all .25s ease;
    }
    .btn-4 {
        overflow: hidden;
        color: #fff;
        border-radius: 30px;
        box-shadow: 0px -0px 0px 0px rgba(143, 64, 248, .5), 0px 0px 0px 0px rgba(39, 200, 255, .5);
    }
    .btn-4:hover {
        transform: translate(0,-6px);
        box-shadow: 10px -10px 25px 0px rgba(143, 64, 248, .25), -10px 10px 25px 0px rgba(39, 200, 255, .25);
    }
    .btn-4:hover::after {
        transform: rotate(150deg);
    }
    .btn-4::after {
        content: '';
        width: 400px;
        height: 400px;
        position: absolute;
        top: -50px;
        left: -100px;
        background-color: #FF3CAC;
        background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
        z-index: -1;
        transition: all .5s ease;
    }

.btn-3:hover::after {
        width: 100%;
    }

.btn-3::after {
        content: '';
        position: absolute;
        border-radius: inherit;
        width: 10%;
        height: 5px;
        background: #000;
        left: 0px;
        bottom: 0px;
        z-index: -1;
        transition: all .25s ease;
        left: 50%;
        transform: translate(-50%);
    }

.btn-2:hover::after {
        transform: translate(-5px, -5px);
    }
    .btn-2:hover::before {
        transform: translate(5px, 5px);
    }
    .btn-2::after,.btn-2::before {
        border: 3px solid #000;
        content: '';
        position: absolute;
        border-radius: inherit;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        left: 0px;
        bottom: 0px;
        z-index: -1;
        transition: all .25s ease;
    }

.btn-1 {
        background: #000;
        color: #fff;
        border-radius: 30px;
        transition: all .25s ease;
    }
    .btn-1::after,.btn-1::before {
        content: '';
        position: absolute;
        opacity: .3;
        background: #000;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        left: 0px;
        bottom: 0px;
        z-index: -1;
        transition: all .25s ease;
    }
    .btn-1:hover {
        transform: translate(-12px, -12px);
    }
    .btn-1:hover:after {
        transform: translate(6px, 6px);
    }
    .btn-1:hover:before {
        transform: translate(12px, 12px);
    }

JavaScript

Output

Live Code Editor

.btn-3:hover::after {
        width: 100%;
    }

Live Code Editor

Output

Live Code Editor

Output

Preparing your download...