Button Hover Effect - Coding Crunch

In this tutorial we will learn to create different type of button hover effect with CSS transitions and transforms.

1. Split Background – Button Hover Effect

HTML

<body>
    <div>Hover Over</div>
</body>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

div {
    font-size: 36px;
    text-decoration: none;
    padding: 35px 75px;
    border: 3px solid #000;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

div::before {
    content: '';
    background: #D35B38;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    transform-origin: bottom left;
    transform: rotate(-90deg);
    transition: transform 1s;
}

div:hover:before {
    transform: rotate(0deg);
}

div::after {
    content: '';
    background: #DEB294;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: -2;
    transform-origin: bottom right;
    transform: rotate(90deg);
    transition: transform 1s 0.5s;
}

div:hover::after {
    transform: rotate(0deg);
}

2. Sliding Background – Button Hover Effect

HTML

<body>
    <div>Hover Over</div>
</body>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 38px;
    padding: 40px 80px;
    border: 3px solid #000;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

div::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #4C2A8F;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateX(-100%);
    transition: all 1s;
}

div:hover::before {
    transform: translateX(100%);
}

3. Two Bars Background – Button Hover Effect

HTML

<body>
    <div>Hover Over</div>
</body>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div {
    font-size: 38px;
    padding: 40px 80px;
    color: #fff;
    background-color: #BBE163;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

div::before {
    content: '';
    width: 100%;
    height: 25%;
    background-color: #F3FFCF;
    position: absolute;
    top: 0;
    left: 0;
    transform: translatex(-100%) rotate(45deg);
    transition: all 2s;
}

div:hover::before {
    transform: translatex(100%) rotate(45deg);
}

div::after {
    content: '';
    width: 100%;
    height: 25%;
    background-color: #F3FFCF;
    position: absolute;
    top: 0;
    left: 0;
    transform: translatex(-100%) rotate(45deg);
    transition: all 1s 0.2s;
}

div:hover::after {
    transform: translatex(100%) rotate(45deg);
}

div:hover {
    border: 3px solid #000;
}

4. Background Changing Text – Button Hover Effect

HTML

<body>
    <div></div>
</body>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div {
    padding: 40px 120px;
    font-size: 38px;
    color: #fff;
    background-color: blue;
    border: 2px solid #000;
    overflow: hidden;
    cursor: pointer;
}

div::before {
    content: 'Hover One';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.8s;
}

div:hover {
    background-color: orange;
}

div:hover::before {
    transform: translateY(-100%);
}

div::after {
    content: 'Hover Two';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(100%);
    transition: all 0.8s;
}

div:hover::after {
    transform: translateY(0);
}

7. Wave Background on Hover

HTML

<body>
  <div>Hover Over</div>
</body>

CSS

html {
    box-sizing: border-box;
}

*,
*::after,
*::before {
    box-sizing: inherit;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

div {
    font-size: 78px;
    padding: 40px 80px;
    border: 2px solid #000;
    position: relative;
    cursor: pointer;
}

div::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

div:hover::before {
    animation: wave 4s ease-in-out infinite;
}

@keyframes wave {
    0% {
        background-color: #009FFD;
        clip-path: polygon(0% 42%, 15% 46%, 35% 58%, 57% 61%, 76% 55%, 89% 48%, 100% 42%, 100% 100%, 0% 100%);
    }

    50% {
        background-color: #009FFD;
        clip-path: polygon(0% 48%, 18% 58%, 38% 55%, 61% 45%, 76% 49%, 89% 58%, 100% 58%, 100% 100%, 0% 100%);
    }

    100% {
        background-color: #009FFD;
        clip-path: polygon(0% 42%, 15% 46%, 35% 58%, 57% 61%, 76% 55%, 89% 48%, 100% 42%, 100% 100%, 0% 100%);
    }
}