Using a Cool CSS Transition Property to Wow


Photo by PhotosByDavid cc

You’ll WOW, just like this
Photo by PhotosByDavid cc

Ah, Facebook. That social media platform most of us love to hate to love. Since I work from home, Facebook has become a sort of “water cooler” for me, touching base with other human beings during the day. It’s a far cry from actual scuttlebutt, but hey – I take what I can get.

This morning, in the midst of articles about lions, the election (eh – that’s already starting), and hair tapestries (yep), I clicked through on an friend-recommended article about Ashtanga yoga. I’m sure the video is great, but the first thing I noticed was the awesome CSS transition property they used on the Play This and View Trailer buttons.

Yeah, I’m a Web Developer.

The website opens up to a fairly normal layout. The cool CSS effect we’re going for is changing those circle buttons to triangles when you hover. You can check out the effect at the bottom of this post in jsFiddle, or click through on this link to the website and see the effect they used first-hand. Thanks to CSS3, this is a really easy effect to create!

Cool CSS Transition PropertyCreating Circle to Triangle CSS Transition Effect

So first we’ll create some basic HTML:

<div class="box">

<div class="squareCircle">


On line three, the “&rs…” is simply an HTML code for a forward arrow we’ll be using instead of a graphic.

Next, the CSS:

.box { width:195px; height:195px; background-color:#52CEC9; padding:50px;
 box-sizing:border-box; }
.squareCircle { position:absolute;
 font-size:50px; color:#fff;
 left:95px; top:70px;

The CSS above is just the basic CSS for the teal blue box and then the HTML arrow. the “.squareCircle” Div is actually not the square we’ll see, but the icon/html/text you’re adding to the middle of the circle.

We could actually switch this and make “.squareCircle” have the border and make the HTML/text/icon be the “:after” that we’re making below. But doing it that way will require double the transform CSS since we’ll have to remove the transform effect from the “:after” instead of adding it.

Third, we’ve got the important CSS transform and transitioning effect:

.squareCircle:after { content:' '; width:100px; height:100px; position:absolute;
left:-42px; top:-15px;
border:1px solid #fff;

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;

There are a few things to note in the code above. First, make sure you include the “content:”” part. Even though the content is empty, the “after” doesn’t work with the content set to something. The next 3 lines are all basic: the position is absolute, we set the height, the position (relative to “.squareCircle”), and the border. On the fourth line, we set the border-radius to 50% which, on an even square (100px high, 100px wide) will give us a circle!

The next section includes the transform properties for all the browsers. We’re rotating it by 45 degrees. Now you might be wondering why we do this, since at this point we have a circle. If you leave out that transform effect, the circle will go into a square, not a diamond.

The last three lines are for the transition for all browsers. We are transitioning all the changes (so every different between these settings and the settings we’re doing next) and we’re giving it a speed of .3 seconds. Want some more help on the transition effect? Check out this beginning transition article.

Finally, we create the magic!

.squareCircle:hover:after { border-radius:0px; cursor:pointer; }

We’ve already done all the work above, so this CSS will remove the border-radius giving us a diamond (or a square if you removed the transform above) and also make the cursor a pointer so users know to click.

Note how we’re referencing this in the css: we’re saying when you HOVER over “.squareCircle”, do these things to the “:after” portion. This is a nice handy chain effect in CSS. If you want other properties to change, you can do that here too; for example, changing the border color or width or even rotating the triangle using the transformation effect from the “.squareCircle:after” CSS.

Want to try it out? Here’s the jsFiddle for the finished product.