How to make buttons with awesome hover effects Using only HTML and CSS, Valorous CSS Buttons

How to make buttons with awesome hover effects Using HTML and CSS

Devnote team
July 11, 2022
5
581 Views
0 Comments

In this tutorial, we will learn How to make buttons with awesome hover effects Using only HTML and CSS, Valorous CSS Buttons. we use Valorant CSS to create an awesome button. Valorous is a team-based tactical shooter from Riot Games, the studio behind League of Legends. And mostly use valorant CSS to create a button hover effect. So today we will create an example of making Buttons with awesome Hover effects Using only HTML and CSS | Valorant CSS Buttons.

Html Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>How to make buttons with awesome hover effects Using only HTML and CSS, Valorous CSS Buttons</title>
  </head>

  <body>
    <div id="container">
        <div class="title">
            <h1>How to make buttons with awesome hover effects Using only HTML and CSS, Valorous CSS Buttons</h1>
        </div>
        <div class="box">
            <button class="primary" type="button">
            <div class="label">
                <span class="hover-effect"></span>
                <span class="label-text">Primary Button</span>
            </div>
            </button>
            <button class="outline" type="button">
            <div class="label">
                <span class="hover-effect"></span>
                <span class="label-text">Outline Button</span>
            </div>
            </button>
            <button class="outline red" type="button">
            <div class="label">
                <span class="hover-effect"></span>
                <span class="label-text">Outline Red Button</span>
            </div>
            </button>
        </div>
    </div>
  </body>
</html>

CSS Code

<style>
    @font-face {
        font-family: "Valorant";
    }

    @font-face {
    font-family: "DIN Next LT Pro Bold";
    src: url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.eot");
    src: url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.eot?#iefix")
        format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.woff2")
        format("woff2"),
        url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.woff")
        format("woff"),
        url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.ttf")
        format("truetype"),
        url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.svg#DIN Next LT Pro Bold")
        format("svg");
    }

    :root {
    --v-red: #ff4655;
    --v-white: #ece8e1;
    --v-black: #000000;
    --v-outline: rgba(236, 232, 225, 0.5);
    }

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

    html, body {
        margin: 0;
        background-color: var(--v-black);
        color: var(--v-white);
        font-family: "Valorant";
        text-rendering: optimizeLegibility;
    }

    h1 {
        font-size: 40px;
    }

    #container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .title {
        text-align: center;
        padding: 0 50px;
    }

    .box {
        width: 50%;
    }

    button {
        width: 100%;
        margin-bottom: 3rem;
        position: relative;
        display: block;
        font-size: 1.9rem;
        padding: 0.7rem;
        border: 0;
        text-transform: uppercase;
        background-color: transparent;
        cursor: pointer;
        color: var(--v-white);
    }

    button:hover {
        color: var(--v-white);
    }

    button::before,
    button::after {
        background-color: transparent;
        content: "";
        display: block;
        position: absolute;
        height: calc(50% - 0.4rem);
        width: 100%;
        border: 1px solid var(--v-outline);
        left: 0;
    }

    button::before {
        border-bottom: 0;
        top: 0;
    }

    button::after {
        border-top: 0;
        bottom: 0;
    }

    /* LABEL START  */
    .label {
        position: relative;
        overflow: hidden;
        margin: 0;
    }

    .label:before {
        content: "";
        height: 100%;
        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
    }

    /* Hover Effect Start */
    .hover-effect {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 120%;
        top: 0;
        left: -5%;
        z-index: 1;
        background-color: var(--v-red);
        transform: translateX(-100%) skew(-10deg);
        transition: -webkit-transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }

    button:hover .hover-effect {
        transform: translateX(0) skew(-10deg);
    }

    /* Label Text Start */
    .label-text {
        position: relative;
        display: block;
        padding: 1.9rem 3rem;
        background-color: transparent;
        z-index: 1;
    }

    .label-text:after {
        content: "";
        display: block;
        position: absolute;
        height: 0.6rem;
        width: 0.6rem;
        right: 0;
        bottom: 0;
        background-color: var(--v-black);
        transition: background-color 0.2s ease-in;
    }

    button:hover .label-text:after {
        background-color: var(--v-white);
    }

    /* OUTLINE BUTTON START */
    .outline {
        color: var(--v-white);
    }

    .outline .label::before,
    .outline .label::after {
        border: 1px solid var(--v-outline);
    }

    /* OUTLINE RED BUTTON START */
    .outline + .red {
        color: var(--v-red);
    }

    .outline + .red:hover {
        color: var(--v-white);
    }

    .outline + .red .label::before,
    .outline + .red .label::after {
        border-color: var(--v-red);
    }

    /* PRIMARY BUTTON START */
    .primary {
        color: var(--v-black);
    }

    .primary .label::before {
        background-color: var(--v-white);
    }
</style>

Full Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>How to make buttons with awesome hover effects Using only HTML and CSS, Valorous CSS Buttons</title>
    <style>
        @font-face {
            font-family: "Valorant";
        }

        @font-face {
        font-family: "DIN Next LT Pro Bold";
        src: url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.eot");
        src: url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.eot?#iefix")
            format("embedded-opentype"),
            url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.woff2")
            format("woff2"),
            url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.woff")
            format("woff"),
            url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.ttf")
            format("truetype"),
            url("https://db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.svg#DIN Next LT Pro Bold")
            format("svg");
        }

        :root {
        --v-red: #ff4655;
        --v-white: #ece8e1;
        --v-black: #000000;
        --v-outline: rgba(236, 232, 225, 0.5);
        }

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

        html, body {
            margin: 0;
            background-color: var(--v-black);
            color: var(--v-white);
            font-family: "Valorant";
            text-rendering: optimizeLegibility;
        }

        h1 {
            font-size: 40px;
        }

        #container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .title {
            text-align: center;
            padding: 0 50px;
        }

        .box {
            width: 50%;
        }

        button {
            width: 100%;
            margin-bottom: 3rem;
            position: relative;
            display: block;
            font-size: 1.9rem;
            padding: 0.7rem;
            border: 0;
            text-transform: uppercase;
            background-color: transparent;
            cursor: pointer;
            color: var(--v-white);
        }

        button:hover {
            color: var(--v-white);
        }

        button::before,
        button::after {
            background-color: transparent;
            content: "";
            display: block;
            position: absolute;
            height: calc(50% - 0.4rem);
            width: 100%;
            border: 1px solid var(--v-outline);
            left: 0;
        }

        button::before {
            border-bottom: 0;
            top: 0;
        }

        button::after {
            border-top: 0;
            bottom: 0;
        }

        /* LABEL START  */
        .label {
            position: relative;
            overflow: hidden;
            margin: 0;
        }

        .label:before {
            content: "";
            height: 100%;
            display: block;
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
        }

        /* Hover Effect Start */
        .hover-effect {
            content: "";
            display: block;
            position: absolute;
            height: 100%;
            width: 120%;
            top: 0;
            left: -5%;
            z-index: 1;
            background-color: var(--v-red);
            transform: translateX(-100%) skew(-10deg);
            transition: -webkit-transform 0.3s ease-out;
            transition: transform 0.3s ease-out;
        }

        button:hover .hover-effect {
            transform: translateX(0) skew(-10deg);
        }

        /* Label Text Start */
        .label-text {
            position: relative;
            display: block;
            padding: 1.9rem 3rem;
            background-color: transparent;
            z-index: 1;
        }

        .label-text:after {
            content: "";
            display: block;
            position: absolute;
            height: 0.6rem;
            width: 0.6rem;
            right: 0;
            bottom: 0;
            background-color: var(--v-black);
            transition: background-color 0.2s ease-in;
        }

        button:hover .label-text:after {
            background-color: var(--v-white);
        }

        /* OUTLINE BUTTON START */
        .outline {
            color: var(--v-white);
        }

        .outline .label::before,
        .outline .label::after {
            border: 1px solid var(--v-outline);
        }

        /* OUTLINE RED BUTTON START */
        .outline + .red {
            color: var(--v-red);
        }

        .outline + .red:hover {
            color: var(--v-white);
        }

        .outline + .red .label::before,
        .outline + .red .label::after {
            border-color: var(--v-red);
        }

        /* PRIMARY BUTTON START */
        .primary {
            color: var(--v-black);
        }

        .primary .label::before {
            background-color: var(--v-white);
        }
    </style>
  </head>

  <body>
    <div id="container">
        <div class="title">
            <h1>How to make buttons with awesome hover effects Using only HTML and CSS, Valorous CSS Buttons</h1>
        </div>
        <div class="box">
            <button class="primary" type="button">
            <div class="label">
                <span class="hover-effect"></span>
                <span class="label-text">Primary Button</span>
            </div>
            </button>
            <button class="outline" type="button">
            <div class="label">
                <span class="hover-effect"></span>
                <span class="label-text">Outline Button</span>
            </div>
            </button>
            <button class="outline red" type="button">
            <div class="label">
                <span class="hover-effect"></span>
                <span class="label-text">Outline Red Button</span>
            </div>
            </button>
        </div>
    </div>
  </body>
</html>

Output

How to make buttons with awesome hover effects Using only HTML and CSS, Valorous CSS Buttons

How to make buttons with awesome hover effects Using only HTML and CSS, Valorous CSS Buttons

If you just want to see the code it is here: valorant button css

Categories:

CSSHTML

Other Articles

Related Posts

Devnote provides a collection of tutorials about PHP, Laravel, WordPress, Django, MySQL, Bootstrap, Jquery, Ajax, APIs, CRUD operations, etc.

Devnote © , All Rights Reserved.

Page Links

Category

Follow Us

Facebook Instagram Twitter Youtube Linkedin Pinterest
Morbi, Gujarat, India - 363641