Amazing Hover Effect on Buttons Using HTML & CSS

yotube
0

 

Example :)

Source Code :)

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="style.css">

    <title>Amazing Hover Effect On Buttons Using HTML & CSS</title>
</head>
<body>
    <div class="wrapper">
        <button class="btn btn-primary">Hover Me</button>
        <button class="btn btn-secondary">Hover Me</button>
        <button class="btn btn-default">Hover Me</button>
    </div>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #2c3e50;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: 'roboto', sans-serif;
}

.btn {
    border: 4px solid;
    background: transparent;
    padding: 1rem 3rem;
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    margin: 0 0 20px 20px;
    position: relative;
    cursor: pointer;
}

.btn::before, .btn::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 4px;
    background: #2c3e50;
    transform: skewX(50deg);
    transition: .3s linear;
}

.btn::before {
    top: -4px;
    left: 10%;
}

.btn::after {
    bottom: -4px;
    right: 10%;
}

.btn:hover:before {
    left: 80%;
}

.btn:hover:after {
    right: 80%;
}

.btn-primary {
    color: #2980b9;
}

.btn-secondary {
    color: #c0392b;
}

.btn-default {
    color: #FFF;
}

.btn:first-child {
    margin-left: 0;
}

Video:

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top