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.
More Easy Cascading Style Sheets: • Create Custom Horizontal Rules • Write Style Rules to Make Them Understandable • Flat Design and Ghost Buttons • Basic Introduction to Simple Responsive Design With Code • Setting a Larger First Letter • Create a Cool Picture Frame Effect with CSS • How to Overlay Text on an Image • CSS Transition Code For a Pulsating Button • Easy CSS 3D Mouse-over Pressed Text Effect • Easy CSS Buttons
|