Friday, 17 March 2023

Fancy Hover Buttons in HTML using CSS

 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> 

Output:-

0 Comments:

Post a Comment

Codecademy Code Foundations

Popular Posts

Categories

Android (23) AngularJS (1) Assembly Language (2) Books (10) C (75) C# (12) C++ (81) Course (1) Data Strucures (4) Downloads (1) Engineering (13) flutter (1) FPL (17) Hadoop (1) HTML&CSS (40) IS (25) Java (89) Leet Code (4) Pandas (2) PHP (20) Projects (19) Python (434) R (69) Selenium Webdriver (2) Software (14) SQL (27)