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

Popular Posts

Categories

AI (27) Android (24) AngularJS (1) Assembly Language (2) aws (17) Azure (7) BI (10) book (4) Books (112) C (77) C# (12) C++ (82) Course (60) Coursera (176) coursewra (1) Cybersecurity (22) data management (11) Data Science (85) Data Strucures (6) Deep Learning (9) Django (6) Downloads (3) edx (2) Engineering (14) Excel (13) Factorial (1) Finance (5) flutter (1) FPL (17) Google (18) Hadoop (3) HTML&CSS (46) IBM (25) IoT (1) IS (25) Java (92) Leet Code (4) Machine Learning (43) Meta (18) MICHIGAN (4) microsoft (3) Pandas (3) PHP (20) Projects (29) Python (719) Python Coding Challenge (155) Questions (2) R (70) React (6) Scripting (1) security (3) Selenium Webdriver (2) Software (17) SQL (40) UX Research (1) web application (8)

Followers

Person climbing a staircase. Learn Data Science from Scratch: online program with 21 courses