Button Shimmer Effect On Hover Using Css

Here’s a comprehensive tutorial on how to create a captivating button shimmer effect on hover using CSS. This effect adds a touch of dynamism to your website’s buttons, enhancing the user experience. Follow the steps below to implement this engaging visual enhancement.

Setting Up the HTML Structure

First, we need to create the basic HTML structure for our button. This involves creating a `div` container to hold the heading and the button itself. The button will contain a `span` element for the text.

<div>
  <h1>Button Shimmer</h1>
  <button><span>Get Started<span></button>
</div>

Styling the Button with CSS

Now, let’s apply the CSS styles to achieve the desired shimmer effect. This involves styling the container, button, and the pseudo-element that creates the shimmer effect.

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-size: 100% 100%;
  background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
  background-image: radial-gradient(49% 81% at 45% 47%, #03FF6D45 0%, #073AFF00 100%), radial-gradient(113% 91% at 17% -2%, #F8DDD4 1%, #FF000000 99%), radial-gradient(142% 91% at 83% 7%, #FAE5F4 1%, #FF000000 99%), radial-gradient(142% 91% at -6% 74%, #71CEEBFF 0%, #FF000000 99%), radial-gradient(142% 91% at 111% 84%, #E583B9 0%, #AC23D7FF 100%);
}

h1 {
  font-family: system-ui;
  font-weight: 800;
  margin: 0;
  line-height: 1;
  font-size: 5.4vw;
}

@property --start-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateTo {
  to {
    --start-angle: 18deg;
  }
}
@keyframes rotateBack {
  from {
    --start-angle: 18deg;
  }
  to {
    --start-angle: 0deg;
  }
}
button {
  display: inline-block;
  position: relative;
  appearance: none;
  border: none;
  outline: none;
  padding: 3vmin 5vmin;
  text-rendering: geometricPrecision;
  font-family: system-ui;
  font-smooth: always;
  font-weight: 600;
  font-size: 6vmin;
  overflow: hidden;
  border-radius: 1vw;
  box-shadow: 0 5px 10px rgba(124, 125, 190, 0.33), 0 5px 20px rgba(124, 125, 190, 0.22), 0 10px 50px rgba(124, 125, 190, 0.22);
  background: conic-gradient(from 0deg at 50% 50%, #D3D7E9 0%, #B3B6E3 5%, #CEB8EC 10%, #B0CBDA 15%, #D5E5EC 20%, #B3B6E3 25%, #AED8D5 30%, #C8E1DE 35%, #AED8D5 40%, #A3CEDB 45%, #D3D7E9 50%, #C8E1DE 55%, #A2CDD8 60%, #C1E2DA 70%, #A3CEDB 75%, #E5F4FA 80%, #D5E5EC 85%, #D1D3E4 90%, #D3D7E9 95%, #D3D7E9 100%);
  transition: all 0.18s ease-in-out;
}
button:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: conic-gradient(from var(--start-angle) at 50% 50%, #E4E7F7 0%, #FFFFFF00 5%, #FFFFFF00 20%, white 25%, #FFFFFF00 30%, #FFFFFF00 40%, #E4E7F7 45%, #FFFFFF00 50%, #FFFFFF00 70%, white 75%, #FFFFFF00 80%, #FFFFFF00 95%, #E4E7F7 100%);
  animation: rotateBack 0.33s ease-in-out forwards;
  transition: all 0.18s ease-in-out;
}
button span {
  position: relative;
}
button:hover {
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(90, 91, 173, 0.33), 0 10px 40px rgba(79, 80, 159, 0.22);
}
button:hover:before {
  opacity: 0.66;
  animation: rotateTo 0.33s ease-in-out forwards;
}

With these steps, you should now have a button shimmer effect on hover using CSS.