How to create a Shimmer Button

Add the Shimmer!

SHIMMER BUTTON

Step 1 – Add The Code

There are a few different ways to create the button animation. This one is the easiest for me to explain and for you to implement into your site. Go to Appearance > Customize > Additional CSS.

Customize your button

The below code will give you a black button, with white text. Then on hover, coral with white. To change this, look through the code above and find the below sections. Then modify the background and color hex codes to your brand colors.

Black Button

Change what is in bold to your colors then copy paste this into your additional CSS

.shimmerbutton {
/*  styling */
display: inline-block;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
color: #fff;
padding: 15px;
position: relative;
text-align: center;
background: #222;
@include fade-transition(background);
}
Coral Button on Hover

Change what is in bold to your colors – Then copy & paste into your additional CSS. Be sure to place this below the code above in the Additional CSS.

.shimmerbutton:hover {
color: #fff;
background: #f4bcab;
}

Step 2 – Add the rest of the code

Add this below the code you just added. This gives the shimmer effect to your button.


@mixin fade-transition($element) {
-webkit-transition: $element 0.15s ease-in-out;
-moz-transition: $element 0.15s ease-in-out;
-ms-transition: $element 0.15s ease-in-out;
-o-transition: $element 0.15s ease-in-out;
transition: $element 0.15s ease-in-out;
}

.shimmerbutton i {
/*   positioning */
position: absolute;
opacity: 0;
top: 0;
left: 0;

/*   gradient   */
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 1%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.85) 71%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.03)), color-stop(30%,rgba(255,255,255,0.85)), color-stop(50%,rgba(255,255,255,0.85)), color-stop(70%,rgba(255,255,255,0.85)), color-stop(71%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
width: 20%;
height: 100%;
/*  animating it  */
animation: move 2s;
animation-iteration-count: infinite;
animation-delay: 1s;
-webkit-animation: move 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
-moz-animation: move 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 1s;
-ms-animation: move 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 1s;
-o-animation: move 2s;
-o-animation-iteration-count: infinite;
-o-animation-delay: 1s;
}

/*  */
@keyframes move {
0%  { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 82%}
}

@-webkit-keyframes move {
0%  { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 82%}
}

@-moz-keyframes move {
0%  { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 88%}
}

@-ms-keyframes move {
0%  { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 82%}
}

@-o-keyframes move {
0%  { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 82%}
}

Step 3 – Use your Button

You can use this code anywhere on your site. In a page/post/or widget. Open a custom HTML block and add the below button code. It is important to add the <i></i> at the end of button text since that is what ques the shimmer.

<a href="YOUR LINK HERE" class="shimmerbutton">YOUR BUTTON TEXT <i></i> </a>
YOUR BUTTON TEXT

Similar Posts