CSS3 Expanding Icons

Welcome to yet another CSS3 tutorial by Coder’s Cabin, once again I present a tutorial about how to use CSS3 transitions!

Overview

---

We will be making a social networking icon, it uses just one single image. All the backgrounds and animation effects are generated by CSS3.

Preparation

---

As we start, we need to know what we are working on. Lets start by making a twitter icon on photoshop. I have the font, so I have made an icon using this in my photoshop (transparent icons are included in the download file). This time, instead of starting with the HTML, let’s start with the CSS!

.icon{
	width:0px;
	height:22px;
	overflow:hidden;
	border:1px solid #000;
	-moz-border-radius:5px;
	white-space:nowrap;
	webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.icon:hover {
	width:150px;
	webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

I have made a class icon. This is the class which holds all the properties for our expanding icon. When on normal state, we have set the width of the icon as 0px. This is set as 0 since we will define it separately in other classes. In psuedo-class .icon:hover, the width has been set to 150px, this is the maximum size the icon can be widened to. If you wish you can increase or decrease it as per your needs. One more thing that you might have noticed is that, I have included transition effects (webkit-transition, -moz-transition, -o-transition, -ms-transition, transition) in both .icon class and in .icon:hover psuedo-class. This is done because whn some one hovers over the icon class, it must expand with an animation and also when some one hovers out of the icon class it must retract to its original form with a reverse animation.

Making an icon

---

So, now we have to write up the HTML for our icons.

<a href="#">
</a></pre>
<div id="twitter" class="icon">Follow on Twitter</div>
<a href="#">
</a>

We have simply added the HTML tags in the order of : Anchor Tag (perform action on click) >> Division Tag (Provide styling of the icon) >> Span Tag (Text for the icon) Since we are making the twitter icon, I have included the icon class and twitter id.

#twitter{
background: #def8f9; /* Old browsers */
background:url(images/twitx32.png) no-repeat, -moz-linear-gradient(top, #def8f9 2%, #9de2e7 2%, #82d0d6 50%, #76c4c8 50%); /* FF3.6+ */
background:url(images/twitx32.png) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(2%,#def8f9), color-stop(2%,#9de2e7), color-stop(50%,#82d0d6), color-stop(50%,#76c4c8)); /* Chrome,Safari4+ */
background:url(images/twitx32.png) no-repeat, -webkit-linear-gradient(top, #def8f9 2%,#9de2e7 2%,#82d0d6 50%,#76c4c8 50%); /* Chrome10+,Safari5.1+ */
background:url(images/twitx32.png) no-repeat, -o-linear-gradient(top, #def8f9 2%,#9de2e7 2%,#82d0d6 50%,#76c4c8 50%); /* Opera11.10+ */
background:url(images/twitx32.png) no-repeat, -ms-linear-gradient(top, #def8f9 2%,#9de2e7 2%,#82d0d6 50%,#76c4c8 50%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#def8f9', endColorstr='#76c4c8',GradientType=0 ); /* IE6-9 */
background:url(images/twitx32.png) no-repeat, linear-gradient(top, #def8f9 2%,#9de2e7 2%,#82d0d6 50%,#76c4c8 50%); /* W3C */

padding:8px 0 2px 32px;

border:1px solid #4a959b;

-webkit-box-shadow: 0px 3px 0px 0px #146f6a;
-moz-box-shadow: 0px 3px 0px 0px #146f6a;
box-shadow: 0px 3px 0px 0px #146f6a;

color:#135954;
text-shadow: 1px 1px 0px #c0dbd9;
filter: dropshadow(color=#c0dbd9, offx=1, offy=1);

}

#twitter:hover{
	width:130px;
}

#twitter:active
{
	margin-top:4px;
	margin-bottom:0px;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}

In div #twitter we have set the default background (for old browsers) and specific background for each latest browser (check comments). Finally adding border with curves! As we write the hover state of the #twitter:hover we increased the width of twitter division to 130px. While, the twitter button is pressed :active pseudo-class is fired. In this we have increased the margin-top property to 4px, so that a push down effect can be seen. Also, we have included text-shadow for each different button. This text-shadow property helps in giving a letter pressed effect to the button. So far, we have made the layout of a button, which expands on hover and gives a clean push down effect.

Final Steps

---

span{
	margin-left:10px;
	font-family:"Myriad Pro";
	font-size:13px;
	font-weight:bold;
}

a{
	margin:10px 5px 0;
	float:left;
	text-decoration:none;
	display:block;
}

We have used Anchor tag and Span tag for setting up hyperlink and to display text on the button. We just had to style them according to our usage.