How to create a button with a CSS-animated background?

Question

does anyone know how to create a CSS button similar to the one displayed on this page:

http://www.pennystocks.com/lp/?r=invstpd

(the white diagonal bar moves from left to right across the button, constantly)

I can see it's CSS, but I've tried searching around and not found anything really similar to this type of style.

Answer 1

the website is using javascript for the animation

How its done

We can break this up:

• The button is given a background-image which in this case is a slight diagonal gradient.
• Using javascript, the position of the given background-image is dynamically changed using event based style changes, in other words an animation.

Let's do it from scratch

Method 1 (This was the initial demo, since firefox does not support background-position-x/y it will not work, see Methods 2, 3 & 4 for that)
http://codepen.io/rajnathani/pen/qKjpL

CSS

button{
    margin:10px;
    padding:15px;
    font-family:verdana;
    font-weight:bold;
    color:whitesmoke;
    text-shadow:1px 1px 1px grey;
    font-size:25px;
    background-repeat:no-repeat;
  background-position-x:-65px;

     border:2px solid skyblue;
      background-color:rgb(0,129,182);
  background-image:url('http://www.pennystocks.com/lp/img/subscribe-light.png')     
}

JS

setInterval(function(){
$('button').animate(
  {'background-position-x':'300px'},
  2000,
  function(){
    $('button').css('background-position-x','-65px')

  })}, 1800)

Method 2 (creating a custom animation with setInterval)

http://codepen.io/rajnathani/pen/DyCIv

CSS

button{
    margin:10px;
    padding:15px;
    font-family:verdana;
    font-weight:bold;
    color:whitesmoke;
    text-shadow:1px 1px 1px grey;
    font-size:25px;
    background-repeat:no-repeat;
  background-position:-75% 0;

     border:2px solid skyblue;
      background-color:rgb(0,129,182);
  background-image:url('http://www.pennystocks.com/lp/img/subscribe-light.png')

}

JS

setInterval(function(){
  var cur_x = parseInt($('button').css('background-position').match(/^([0-9\-]+)/)[0]);
      if (cur_x <= 300){
        $("button").css('background-position', cur_x + 1 + "% 0")

      } else {
          $('button').css('background-position',"-75% 0")  
      }

    }, 1
  );

An additional two methods have been added

The following methods are PURE CSS methods, there is 0kb of javascript code. That being said this method as of today 4th July 2013 is not 100% supported by all of the frequently used browsers. However if you are seeing this post maybe a decade later I would expect that CSS3 would have been properly implemented, and using it for the animation would be the way to go.

Method 3 (Using CSS to produce the background-position animation)

http://codepen.io/rajnathani/pen/Cugol

CSS

@keyframes glide {
  from {
      background-position:-75% 0;
  } to {
    background-position:300% 0;

  }
}

And then add animation:glide 1200ms infinite; to the property declaration of button

Method 4 (javascript feels left out, let us send HTTP to spend sometime with javascript. We'll create the gradient with css)

http://codepen.io/rajnathani/pen/FvfHk

button{
    margin:10px;
    padding:15px;
    font-family:verdana;
    font-weight:bold;
    color:whitesmoke;
    text-shadow:1px 1px 1px grey;
    font-size:25px;
    background-repeat:no-repeat;
  background-position:-115% 0;

     border:2px solid skyblue;
      background-color:rgb(0,129,182);

    background-color:rgb(0,129,182);
    background-image:-webkit-linear-gradient(
    -45deg, rgb(0,129,182),
    rgb(0,129,182) 30%,
    rgb(37,179,239) 50%, rgb(0,129,182) 70%, rgb(0,129,182) 100% 
    );
  background-image:linear-gradient(
    -45deg, rgb(0,129,182),
    rgb(0,129,182) 30%,
    rgb(37,179,239) 50%, rgb(0,129,182) 70%, rgb(0,129,182) 100% 
    );
  background-repeat:no-repeat;
  background-size:135px 55px;

    -webkit-animation:glide 1050ms infinite;
  animation:glide 1050ms infinite;
}

@-webkit-keyframes glide {
  from {
      background-position:-115% 0;
  } to {
    background-position:225% 0;

  } 
}

@keyframes glide {
  from {
      background-position:-115% 0;
  } to {
    background-position:225% 0;

  }
}

Answer 2

The designer has used an image to display what looks like a flash of light across the button.

They then most likely use some javascript to infinitely animate the movement of the image

Answer 3

It just uses this image, sets it as the the div's background and then configure it's background-position's x axis. Simple :)

Answer 4

This is not a pure css animate just a background-position animate using this png : http://www.pennystocks.com/lp/img/subscribe-light.png

<div id="subscribelight" class="subscribe-light" style="background-position: 204px 0px;">
  <div class="subscribe-fade">
   <div class="subscribe-text" onclick="$(this).submit();">
   </div>
  </div>
</div>

You can do it with CSS3 http://css-tricks.com/snippets/css/keyframe-animation-syntax/ or using jQuery.

I recommand you to use Firebug or Chrome Inspector (or Safari Inspector).