How to Create an Effect to Change Button Color using HTML and CSS ?
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 = "#" >w3wiki</ 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( 360 deg); transition: 1 s; transform-origin: left ; } a:hover::before { border-color : #00f ; transform: rotate( 60 deg); } </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 = "#" >w3wiki</ a > </ body > </ html > |
Output: