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

button, css, css-animations, html

Solution

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;

  }
}

Problem

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.

Original source