Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

CSS Transition Code For a Pulsating Button

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.

lineareffect has the same speed from start to end
easeeffect with a slow start, then fast, then end slow
ease-ineffect with a slow start
ease-outeffect with a slow end
ease-in-outeffect 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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268