Question

This is probably a css3 transitions thing but I don’t know css well enough to create this. Mainly what I would like to do is make a button grow in size (125% of the original size) for a couple of milliseconds and then revert back to the original size before the page goes to the next page. Is this possible with css/css3/transitions and if so, how would this be done?

Thank you!

Answer 1

Make your button an <a> and use the :active pseudo-class to do the expand effect. An easy way to do this without messing up layout is the outline property.

Demo:

CSS:

.button {
    background-color: black;
    border: 1px solid black;
    color: white;
    display: inline-block;
    padding: 5px;
}

.button:active {
    outline: 10px solid black;    
}

HTML:

<a class="button">press me</a>
​