How to create a shinny button using HTML and CSS ?
Last Updated :
11 Jun, 2020
Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button can be styled. We will be looking at how to create a shinny button. You all might have seen light moving from one end to another and when it gets reflected on some shinny surface. We will be implementing the same thing on mouse-hover.
Approach: The approach is to use pseudo selectors before and after selectors.Using before we will be making strip kind of effect and using after we will make sure it move back and forth give it a reflection kind of look which makes our button look shinny.
HTML Code: In this section, we have created a button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Gradient Text</title>
</head>
<body>
<button>GeeksForGeeks</button>
</body>
</html>
|
CSS Code:For CSS, follow the below given steps.
- Step 1: First do some basic styling of button like a background some and border-radius.
- Step 2: Now use inset shadow property to give a shadow to the inside of the border of button.
- Step 3: Now use before selector to create a strip. The trick is to use width less than the actual width of the button and height equal to the actual height of the button. The use of skew function is completely optional, you can skip if you want to. We have used it to have a slightly skewed strip.
- Step 4: Now use hover to move the strip to the left.
- Step 5:Repeat step 3 and 4 with after selector just change the width to negative value to move the strip back to it’s original position.
Tip:You can use some line and length spacing to make some room around the text of the button to give it a more clear look.
<style>
button {
position: absolute;
top: 40%;
left: 40%;
width: 200px;
height: 60px;
text-align: center;
background: black;
font-size: 24px;
color: white;
font-family: "Gill Sans", "Gill Sans MT",
Calibri, "Trebuchet MS", sans-serif;
border-radius: 60px;
border: 4px solid black;
box-shadow: inset 0 0 30px rgb(97, 96, 96);
}
button::before {
content: "";
position: absolute;
top: 0;
left: 10px;
width: 70%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
transform: skewX(-15deg);
}
button:hover::before {
left: 190px;
}
button::after {
content: "";
position: absolute;
top: 0;
left: -70px;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
transform: skewX(-15deg);
}
button:hover::after {
left: 190px;
}
</style>
|
Complete Code: It is the combination of the above two sections of the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Gradient Text</title>
</head>
<style>
button {
position: absolute;
top: 40%;
left: 40%;
width: 200px;
height: 60px;
text-align: center;
background: black;
font-size: 24px;
color: white;
font-family: "Gill Sans", "Gill Sans MT",
Calibri, "Trebuchet MS", sans-serif;
border-radius: 60px;
border: 4px solid black;
box-shadow: inset 0 0 30px rgb(97, 96, 96);
}
button::before {
content: "";
position: absolute;
top: 0;
left: 10px;
width: 70%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
transform: skewX(-15deg);
}
button:hover::before {
left: 190px;
}
button::after {
content: "";
position: absolute;
top: 0;
left: -70px;
width: 50px;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: 0.5s;
transform: skewX(-15deg);
}
button:hover::after {
left: 190px;
}
</style>
<body>
<button>GeeksForGeeks</button>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...