Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

CSS Transition Code For a Pulsating Button

By Stephen Bucaro

If you have a website with tens of thousands of articles, it's impossible to list them in a sidebar menu, you have to place the menu on a separate page(s) and place a link to the menu on your section front page. The problem is, how to you get visitors to discover the menu button? One way is make it pulsate.

And, one way to make a menu button pulsate is to use CSS transitions. There are three CSS transition properties that I will use in this example; transition-property, transition-duration, and transition-timing-function.

transition-property

transition-property specifies the name of the CSS property to which to apply the transition effect. This could be almost any CSS property, but is usually be applied to an element's color or opacity.

transition-duration

A sudden change, say from opaque to transparent, is not really a transition. A transition moves from one value to another over a period of time, although the time period may be short, for example 1 second. transition-duration specifies how many seconds (s)or milliseconds (ms) a transition effect takes to complete.

transition-timing-function

transition-timing-function specifies the speed or shape of the curve of the transition effect.

linear	effect has the same speed from start to end
ease	effect with a slow start, then fast, then end slow
ease-in	effect with a slow start
ease-out	effect with a slow end
ease-in-out	effect with a slow start and end
cubic-bezier(n,n,n,n)	allows you to define your own curve

With the cubic-bezier timing function you pass parametric values from 0 to 1 to define your own curve. For example, using cubic-bezier(0,1,1,0), you could create a transition that begins very fast, stalls in the middle, then ends very fast. Most of the curves you could create will resemble one of the other previously define curves, except you might get more precise control.

Note that the menu button in the right column of this section has a pulsating menu button. The code for that button is shown below.

<style type="text/css">
.menubtn
{
margin-top:10px;
margin-left:50px;
width:220px;
opacity:1;
border-style:solid;
border-color:#009000;
background-color:#66ff66;
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: ease-out;
}
.menubtn:hover
{
opacity:1;
background-color:#e5ff23;
}
</style>

<script>
var transparent = .2;

function pulsate()
{
if(transparent == .2) transparent = 1;
else transparent = .2;

document.querySelector(".menubtn").style.opacity = transparent;
}

function stopPulse()
{
   transparent = 1;
   clearInterval(timer);
}

var timer = setInterval(pulsate,2000);
</script>

This code uses a JavaScript Interval timer function to pulse the menu button every 2 seconds. The transition-property opacity causes the button to fade-out, the transition-duration is 1 second, and the transition-timing-function is ease-out. The button uses its onmouseover event to call the stopPulse() function, which ends the transition effect. If the user has moved their mouse over the button, I assume they've found the menu button.