Buttons are one of the most important elements of any website, serving as gateways for user interaction. Whether it’s a call-to-action button, a menu button, or even a social media button, adding visual appeal can greatly enhance user engagement. One such way to do this is through the Shining Button Hover Effect, a simple yet visually striking CSS effect that adds a sleek animation to your buttons.
Shining Button Hover Effect is a popular design technique that adds a touch of shine or sparkle to any button when a user hovers over it. This effect is achieved using a combination of HTML and CSS, making it simple to implement and customize for any website.
How to Create a Shining Button Hover Effect
In this article, we will learn how to create a Shining Button Hover Effect using HTML & CSS simple step-by-step process of creating a Shining Button Hover Effect using HTML and CSS, as well as its benefits and some tips for customization.
Step-by-step process of creating a Shining Button Hover Effect using HTML and CSS
Create a Folder: Start by creating a folder for your project. You can name it anything you like. Inside this folder, you’ll need to create the following files:
- index.html (for the structure of your Shining Button)
- style.css (for styling the Shining Button)
Create the HTML File:
- Name your HTML file index.html.
Create the CSS File:
- Name your CSS file style.css.
Step 1: Setting up the HTML Structure
The first step to creating a Shining Button Hover Effect is to set up the HTML structure for the button. This includes creating a button element within a container.
<!DOCTYPE html>
<!-- NotArena || www.NotArena.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons Shining Hover</title>
<link rel="stylesheet" href="style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-1a672bbb-b277-4d38-b93b-8cf2ccbc3470: url('https://notarena.com/wp-content/plugins/ultimate-post/assets/img/loading.gif');}.rll-youtube-player .play{--wpr-bg-56ede7fb-0fae-4fca-b0d7-7861fab5f2a8: url('https://notarena.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".ultp-block-wrapper .slick-loading .slick-list","style":".ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-1a672bbb-b277-4d38-b93b-8cf2ccbc3470: url('https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif');}","hash":"1a672bbb-b277-4d38-b93b-8cf2ccbc3470","url":"https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-56ede7fb-0fae-4fca-b0d7-7861fab5f2a8: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"56ede7fb-0fae-4fca-b0d7-7861fab5f2a8","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="container">
<a href="#" class="btn green">Green Button</a>
<a href="#" class="btn blue">Blue Button</a>
</div>
</body>
</html>
Step 2: Adding the Styles for the Button
We need to set the initial styles for the button. These can include background colour, font size, and other basic styles. For this effect, we will also add a box shadow to the button to give it a three-dimensional look.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 20px;
}
.btn {
position: relative;
display: inline-block;
padding: 15px 30px;
font-size: 18px;
color: white;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
overflow: hidden;
transition: 0.5s;
border-radius: 30px;
z-index: 1;
}
.btn.green {
background-color: #4CAF50;
}
.btn.blue {
background-color: #2196F3;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 300%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transform: skewX(-45deg);
transition: 0.5s;
z-index: -1;
}
.btn:hover::before {
left: 100%;
}
.btn:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
You can customize the button by changing the colours and box-shadow to match your website’s colour scheme. This will make the button more cohesive with the overall design.
The Shining Button Hover Effect is a simple yet effective design technique that can add a touch of sparkle to any website’s buttons. By following the steps outlined in this article, you can easily create your own shining buttons using HTML and CSS. So, go ahead and give your buttons that extra shine they need to stand out!
