Scribd Logo
Upload

Welcome to Scribd!

  • Q40

    Uploaded by

    Achal Kumar
    5 views1 page
    This document contains CSS code that defines styles for a button element. The button has a blue background color and white text by default. On hover, the background becomes transparent while the text color switches to blue. Hover effects involve animating the width of pseudo-elements placed before and after the button text from 100% to 0%.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains CSS code that defines styles for a button element. The button has a blue background color and white text by default. On hover, the background becomes transparent while the text color switches to blue. Hover effects involve animating the width of pseudo-elements placed before and after the button text from 100% to 0%.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views1 page

    Q40

    Uploaded by

    Achal Kumar
    This document contains CSS code that defines styles for a button element. The button has a blue background color and white text by default. On hover, the background becomes transparent while the text color switches to blue. Hover effects involve animating the width of pseudo-elements placed before and after the button text from 100% to 0%.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!

    DOCTYPE html>
    <html>
    <head>
    <style>
    /* Button Styles */
    .button {
    display: inline-block;
    position: relative;
    padding: 10px 20px;
    font-size: 18px;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    background-color: #4286f4;
    overflow: hidden;
    transition: all 0.3s ease;
    }

    .button::before,
    .button::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    }

    .button::before {
    top: 0;
    }

    .button::after {
    bottom: 0;
    }

    /* Hover Effects */
    .button:hover {
    background-color: transparent;
    color: #4286f4;
    }

    .button:hover::before,
    .button:hover::after {
    width: 0;
    }
    </style>
    </head>
    <body>
    <a href="#" class="button">Hover Me</a>
    </body>
    </html>

    You might also like