How to Create an Effect to Change Button Color using HTML and CSS ? - GeeksforGeeks

15 Feb, 2021
The color-changing effect of a button is very common but what we are going to do a slightly advanced version of this effect. The background will change like a clip effect rotating at some particular angle.
Approach: The approach is to provide two or three background and then rotating them on different angles.
HTML Code: In this section, we will use HTML code to design the body structure.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />    <title>Button effect</title></head>  <body>    <a href="#">GeeksforGeeks</a></body>  </html>
CSS Code: In this section, we will follow some steps to design the button effect.
Step 1: First, we set the position of button and then use text-decoration property to remove underline from link. Also, set the width, height, color and background color of a button.
Step 2: Here we apply the second background with rotation using the before selector. We have used z-index to display this background at the top of other one.
Step 3: Now, apply final background with a different degree of rotation using nested selection of both hover and before selector.
Tip: You can change the degree of rotation to change the effect a bit according to your need.
Below is the implementation of the above three steps.
<style>    body {        padding: 0;        margin: 0;    }      a {        position: absolute;        top: 40%;        left: 40%;        transform: translate(-50%, -50%);        width: 180px;        height: 60px;        color: white;        text-decoration: none;        text-align: center;        padding-top: 30px;        font-size: 20px;        overflow: hidden;        background: green;    }      a::before {        content: "";        position: absolute;        width: 0;        height: 0;        left: 0;        bottom: 0;        border-style: solid;        border-color: #f00;        border-width: 80px 100px;        z-index: -1;        transform: rotate(360deg);        transition: 1s;        transform-origin: left;    }      a:hover::before {        border-color: #00f;        transform: rotate(60deg);    }</style>
Complete Code: In this section, we will combine the above to section to make a color-changing effect on button using HTML and CSS.
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport"           content="width=device-width, initial-scale=1.0" />    <title>Button effect</title>    <style>        body {            padding: 0;            margin: 0;        }          a {            position: absolute;            top: 40%;            left: 40%;            transform: translate(-50%, -50%);            width: 180px;            height: 60px;            color: white;            text-decoration: none;            text-align: center;            padding-top: 30px;            font-size: 20px;            overflow: hidden;            background: green;        }          a::before {            content: "";            position: absolute;            width: 0;            height: 0;            left: 0;            bottom: 0;            border-style: solid;            border-color: #f00;            border-width: 80px 100px;            z-index: -1;            transform: rotate(360deg);            transition: 1s;            transform-origin: left;        }          a:hover::before {            border-color: #00f;            transform: rotate(60deg);        }    </style></head>  <body>    <a href="#">GeeksforGeeks</a></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Questions
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)