Create Shimmering Effect Button: HTML & CSS Tutorial (Source Code)

By Faraz - March 07, 2024

Learn to design an eye-catching button with HTML & CSS. Step-by-step tutorial for adding shimmering effects to enhance user experience.

Join us on Telegram

Create Shimmering Effect Button HTML & CSS Tutorial.webp

Read Also Create a Stunning Booking App Interface with HTML, CSS, and JS.webp

Create a Stunning Booking App UI with HTML, CSS, and JavaScript (Source Code Included)

A Shimmering effect button is an enticing way to enhance user interaction on websites. They captivate attention and add a touch of elegance to the user interface. In this tutorial, we'll walk through the process of creating a shimmering effect button using HTML and CSS. By following these simple steps, you'll be able to incorporate this eye-catching feature into your web projects effortlessly. Let's dive in and make your buttons shine!

Source Code

Step 1 (HTML Code):

To begin, let's set up the basic HTML structure for our button. Start with a simple button element.

Let's break down the HTML code step by step:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which is HTML5 in this case.

2. <html lang="en">: This opening tag defines the start of the HTML document and specifies the language of the content, which is English (en).

3. <head>: This section contains metadata about the HTML document, such as character encoding, viewport settings, and the title of the webpage.

<meta charset="UTF-8">: This meta tag specifies the character encoding used in the document, which is UTF-8, capable of representing most characters in the Unicode standard.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties, ensuring proper rendering and scaling of the webpage on various devices. It sets the width of the viewport to the device's width and sets the initial scale to 1.0.
<title>Shimmering Button</title>: This tag defines the title of the webpage, which typically appears in the browser's title bar or tab.
<link rel="stylesheet" href="styles.css">: This tag links an external CSS (Cascading Style Sheets) file named styles.css to the HTML document. This CSS file contains styling rules that define the appearance of elements on the webpage.

4. <body>: This section contains the content of the webpage visible to the user.

<button class="shimmer-button">Shimmering Button</button>: This button element creates a button with the text "Shimmering Button" inside it. It has a CSS class shimmer-button, which is used to apply specific styles to this button. The shimmering effect is defined in the linked CSS file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shimmering Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="shimmer-button">Shimmering Button</button>
</body>
</html>

Read Also Create Sticky Navbar with Tailwind CSS.jpg

Create Sticky Navbar with Tailwind CSS

Step 2 (CSS Code):

Next, let's style our button using CSS to give it a sleek appearance and add the shimmering effect using CSS animation. Let's break down the CSS code:

1. body: This applies styles to the entire body of the HTML document.

background-color: Sets the background color to a light blue (#ddeefa).
display, justify-content, align-items: These properties are used in conjunction with flex to center elements horizontally and vertically within the body.
height: Sets the body's height to 100% of the viewport height (100vh), ensuring it covers the entire visible area of the browser window.
margin: Sets the margin of the body to 0, removing any default spacing.

2. .shimmer-button: This defines styles for buttons with the class "shimmer-button".

padding, font-size, text-align: These properties control the appearance of the text inside the button.
background-color: Sets the background color of the button to a shade of blue (#3498db).
color: Sets the text color to white.
border, border-radius: Defines the border properties and border-radius to give the button rounded corners.
position, overflow: These properties are used for positioning and ensuring any content overflowing the button is hidden.
cursor: Sets the cursor style to a pointer, indicating the button is clickable.
box-shadow: Adds a shadow effect to the button.
transition: Specifies the transition effect for the button's transform and box-shadow properties.

3. .shimmer-button:hover: This defines styles for the button when hovered over.

transform: Moves the button upwards slightly on hover.
box-shadow: Increases the shadow effect on hover.

4. .shimmer-button::before: This creates a pseudo-element that is inserted before the content of the button.

content: Defines the content of the pseudo-element (which is empty in this case).
position: Sets the position of the pseudo-element relative to its parent.
top, left: Positions the pseudo-element at the top-left corner of the button.
width, height: Sets the width and height of the pseudo-element to be twice the size of the button, extending beyond its boundaries.
background: Applies a linear gradient to the pseudo-element, creating a shimmer effect.
animation: Initiates an animation called "shimmer" with a duration of 2 seconds, set to repeat infinitely in a linear fashion.

5. @keyframes shimmer: This defines the keyframes for the shimmer animation.

0%: At the start of the animation, the pseudo-element is positioned to the left of its parent (i.e., outside the button).
100%: At the end of the animation, the pseudo-element is positioned to the right of its parent, covering it entirely.

body {
  background-color: #ddeefa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.shimmer-button {
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.shimmer-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.shimmer-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.15) 75%);
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

Final Output:

Create Shimmering Effect Button HTML & CSS Tutorial.gif

See the Pen Shimmering Effect Button by Faraz (@codewithfaraz) on CodePen.

Read Also

creating a button in pure css with border animation.png

How to Create a Pure CSS Button with Border Animation

Conclusion:

In conclusion, you've learned how to create a captivating shimmering effect button using HTML and CSS. By leveraging CSS animations, you can add an element of interactivity and visual appeal to your website's buttons. Remember to experiment with different colors, durations, and styles to customize the button to fit your website's design seamlessly. With this newfound knowledge, you're equipped to create stunning buttons that will leave a lasting impression on your users. Keep exploring and pushing the boundaries of web design. Happy coding!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊