Friday, 17 March 2023

Fancy Hover Buttons in HTML using CSS

Piyush March 17, 2023 HTML&CSS No comments

In this we are going to add three types of hover button styles which will make your buttons very innovative and attractive.

1.Border Pop

2.Background Slide

3.Background Circle

Code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fancy Buttons</title>
    <style>
        * ,*::before ,*::after{
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin: 0;
        }
        button{
            margin: 1rem;
        }
        .btn{
            background-color: var(--background-color);
            color: #222;
            padding: .5em 1em;
            border: none;
            outline: none;
            position: relative;
            cursor: pointer;

            --background-color: #E3E3E3;
            --border-size:2px;
            --accent-color: #0af;
        }
        .btn.btn-border-pop::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom:0;
            z-index: -1;
            border: var(--border-size) solid var(--background-color);
            transition: top,left,right,bottom,100ms ease-in-out;
        }
        .btn.btn-border-pop:hover::before,
        .btn.btn-border-pop:focus::before{
            top: calc(var(--border-size)* -2);
            left: calc(var(--border-size)* -2);
            right: calc(var(--border-size)* -2);
            bottom: calc(var(--border-size)* -2);
        }
        .btn.btn-background-slide::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--accent-color);
            z-index: -1;
            transition: transform 300ms ease-in-out;
            transform: scale(0);
            transform-origin: left;
        }
        .btn.btn-background-slide:hover::before,
        .btn.btn-background-slide:focus::before{
        transform: scale(1);

        }

        .btn.btn-background-slide{
            z-index: 1;
            transition: color 300ms ease-in-out;
        }
        .btn.btn-background-slide:hover,
        .btn.btn-background-slide:focus{
            color: white;
        }
        .btn.btn-background-circle::before{
         content: "";
         position: absolute;
         top: 0;
         left:0;
         right:0;
         bottom: 0;
         z-index: -1;
         background-color: var(--background-color);
         border-radius: 50%;
         transition: transform 500ms ease-in-out;

         transform: scale(1.5);
        }
        .btn.btn-background-circle:hover::before,
        .btn.btn-background-circle:focus::before{
         transform:scale(0);
        }

        .btn.btn-background-circle{
            z-index:1;
            overflow: hidden;
            background-color: black;
            transition: color 500ms ease-in-out;
        }
        .btn.btn-background-circle:hover,
        .btn.btn-background-circle:focus{
              color: white;
        }

        .btn.btn-border-underline::before {
            content: "";
            color: brown;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: var(--border-size);
            background-color: var(--accent-color);
            transform: scaleX(0);
        }

    </style>
</head>
<body>
    <button class="btn btn-border-pop">Border Pop</button>
    <button class="btn btn-background-slide">Background Slide</button>
    <button class="btn btn-background-circle">Background Circle</button>

</body>
</html>