Code a Set of Animated App Store Buttons With CSS

by on 3rd May 2012 with 10 Comments

screenshot

I’ve gotten bored lately with all of the run of the mill, plain jane iTunes/Mac App Store buttons that I’ve been seeing around the web, so I coded up some fun little animated alternatives that I thought I would share.

This project is super simple, so even if you’re a complete beginner, you should be able to follow along. We’ll learn how to use some fancy techniques like how to incorporate icon fonts into a design and how to insert objects using pseudo elements.

The Concept

To start a project it’s, often fun to grab a pencil and sketch out a few ideas. We tend to think more freely when drawing with our hands than a mouse. You don’t have to be any good at drawing either, feel free to scribble down quick, ugly sketches. As long as they communicate your thought process, they work!

screenshot

The concept here is pretty basic and similar to other projects we’ve done in the past. I’d like to start with a circle that contains only an icon. Then, when you hover over the icon, it expands to show a message about downloading the app on the app store.

Of course, since Apple has three primary device archetypes (iPad, iPhone and Mac), we’ll need to create a few different versions to over the bases.

Step 1: The HTML

To begin, bust out a div like the one shown below. Inside I’ve placed a paragraph wrapped in an anchor tag, part of which is also wrapped in a small tag. This will help us differentiate the text a little.

Looking at this now, it feels a little markup heavy. You could probably apply the classes directly to the anchor and skip the div altogether, but we’ll stick with this for now. Notice that I’ve applied two separate classes to the div. I could’ve gotten away with one, but in order to differentiate between the different types of buttons that we’ll be creating, it helps to separate them into separate classes (this allows you to target each version individually). The repeated styles can then be grouped into one “appstorebutton” class, an organization method that will keep our CSS nice and DRY.

Also note that HTML5 allows us to wrap a link around anything we want, so if that looks a little wonky to you, just know that it’s perfectly allowed.

Step 2: Basic Button Styles

Now let’s jump over to some CSS and grab that “appstorebutton” hook. The default state of the button will be a circle, but it’s a lot easier to arrange everything with the button in its expanded state, so we’ll start out with a width of 275px, which we’ll reduce to 80px once we’re all finished.

.appstorebutton {
  height: 80px;
  width: 275px;
  margin: 50px;
  position: relative;
  overflow: hidden;
}

.iphone {
  background: #7b7a7f;
}

There are a few other interesting things here as well. First off, we applied relative positioning because we’re going to use some absolute positioning on an element within this one later and this will give us a starting point. If this doesn’t make any sense, read this article.

We also set the overflow to hidden. This is because when the button is in its circular state, much of the content will be outside of the physical bounds of the button and we want to keep it nice and invisible. Finally, we applied a background color to the “iphone” class. Later we’ll create a few more of these for the other versions.

Progress Check

At this point, our object is hideous, but don’t worry, it’ll look better in no time.

screenshot

Step 3: Style The Paragraph

Next up, it’s time to fix that ugly text. This is pretty straightforward and involves turning the color to white and defining different sizes for the small and regular paragraph text. I also declared a set width, which breaks the text into two lines, then used margins to push it all into place.


.appstorebutton a {
  color: white;
  text-decoration: none;
}

.appstorebutton p {
  font: 30px/1 Helvetica, Arial, sans-serif;
  text-align: center;
  color: white;
  margin: 4px 0 0 65px;
  width: 180px;
}

.appstorebutton p small {
  font-size: 15px;
}

Progress Check

Didn’t I promise you everything would look good soon? Already we’re starting to see the end result shaping up. It’s amazing how far a little styled text can go!

screenshot

Step 4: Add The Icon

In the image above, the text seems awkwardly scooted over to the right with a big empty space on the left. This is where our little iPhone icon will go. Before we put it in there though, we need to think about how to go about it.

The first thought that pops into my mind is to use an icon font. These are simple to implement and infinitely scalable and will therefore work perfect for a button graphic. After a little hunting, I found a free font called Modern Pictograms from Font Squirrel that contains both an iPhone and an iPad that we can use for this project.

screenshot

Now, rather than clutter up our markup any further, we can insert this icon using pure CSS by utilizing the :before pseudo element. The code for this along with the implementation of the icon font is shown below.

.iphone p:before {
  content: "O";
  position: absolute;
  font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
  top: 10px;
  left: 20px;
}

/*Font-Face*/
@font-face {
  font-family: 'ModernPictogramsNormal';
  src: url('modernpics-webfont.eot');
  src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
    url('modernpics-webfont.woff') format('woff'),
    url('modernpics-webfont.ttf') format('truetype'),
    url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
  font-weight: normal;
  font-style: normal;
}

As you can see, we told our CSS that “before” the paragraph, we wanted to insert the letter “O”, which corresponds to the iPhone graphic in the Modern Pictograms font. The @font-face code that I used here is copied and pasted straight from the awesomely convenient @font-face kits found on Font Squirrel.

Next up, we scooted the iPhone graphic into place. By utilizing absolute positioning here, we pull the graphic out of the normal flow. However, it’s bound to the space of our button because of the relative positioning context that we applied in a previous step. From here, we nudge it ten pixels from the top and twenty from the left, and then we’re all set.

Progress Check

As you can see, the icon from the font looks perfect in out little button. All that’s left for us to do know, is round off our corners, reduce the width and set a hover transition.

screenshot

Step 5: Make the Circle

Now that our button looks roughly how we want when it’s expanded, it’s time to contract it. To do this, go back to our “appstorebutton” hook and set the width to 80px, then add in a border radius of 40px.

.appstorebutton {
  height: 80px;
  width: 80px;
  margin: 50px;
  position: relative;
  overflow: hidden;

  -webkit-border-radius: 40px;
     -moz-border-radius: 40px;
          border-radius: 40px;
}

Progress Check

Now our button has collapsed into a nice little circle. Since our overflow is hidden, you won’t see any of the text. In the next step, we’ll see how to bring it all back.

screenshot

Step 6: Expand on Hover

To finish off our animated button, we need to add in a transition and a hover state. Our transition will target the width of the .appstorebutton class with a duration of one second and a timing function of “ease.”

Then, once the user hovers over the button, it will expand to the 275px width that we had used before.

.appstorebutton {
  height: 80px;
  width: 80px;
  margin: 50px;
  position: relative;
  overflow: hidden;
  float: left;

  -webkit-border-radius: 40px;
     -moz-border-radius: 40px;
   	  border-radius: 40px;

  -webkit-transition: width 1s ease;
     -moz-transition: width 1s ease;
       -o-transition: width 1s ease;
      -ms-transition: width 1s ease;
	  transition: width 1s ease;
}

.appstorebutton:hover {
  width: 275px;
}

Progress Check

Our button is all finished! At this point everything should be working perfectly. If you’ve followed along, your result should look like the one below.

screenshot

Step 7: Add The Others

Now that we have one button all ready to go, it’s time to expand this idea into a set of three buttons. Add two more divs to your HTML and give them each a unique class like I did below.

From here we follow the steps that we did before to insert the icons using the :before pseudo element. The iPad icon is “Q” in our icon font, but unfortunately there’s no laptop or iMac that we can use for the Mac App Store icon. For this, I went over and grabbed an icon from the fabulous Noun Project (I had to tweak it a little to make it closer to the others).

screenshot

To finish everything off, I gave each button a unique color using the special classes that we applied in our HTML. Use these to apply any other button-specific styles that you’d like to use.

.iphone small:before {
  content: "O";
  position: absolute;
  font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
  top: 10px;
  left: 20px;
}

.ipad small:before {
  content: "Q";
  position: absolute;
  font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
  top: 10px;
  left: 13px;
}

.mac small:before {
  content: url('imac.png');
  position: absolute;
  top: 22px;
  left: 19px;
}


/*Button Colors*/
.iphone {
  background: #7b7a7f;
}

.ipad {
  background: #2ea9dc;
}

.mac {
  background: #dc2e2e;
}

See Them in Action!

All of your hard work has paid off and you have a neat little button set to show for it. If you haven’t been following along and building the buttons yourself, click below to take the result for a test drive.

Demo: Click here to launch the demo.

screenshot

Conclusion

Little project like these are great for keeping your CSS chops fresh and your brain in a mode of constantly thinking up new design ideas.

Have you seen any other creative App Store buttons recently? Let us know in the comment area below.

Comments & Discussion

10 Comments

  • John L

    The rounded corners will not work in IE (except IE9) without using graphical rounded corners. #justsayin

  • http://www.vlondesigns.com danny

    looks great nicely done, i would suggest to move the “Available …” a few or 1 px to the right so you wont’t a tiny white speck in the circle. :)

  • http://www.vlondesigns.com danny

    meant won’t see a tiny speck :)

  • http://www.thowlett.co.uk/ Tom

    Very nice. Definitely better than your standard buttons. I imagine there are many other uses as well (Not too familiar with advanced CSS).

  • namrata

    Very good tutorial. But the @font-face thingy doesn’t work for me.

    • Eric

      You have to get the @font-face pack form the website he referred to. In any @font-face reference you need to have a font pack on your webserver and CSS3 calls that font to display for the viewer. If you don’t have the font on your webserver then it doesn’t know what to display and will just display the “O”

      Copy the font to the same directory on your web server as the html document and it will work.

  • http://www.wpsquare.com Bharat Chowdary

    Awesome tutorial, very clearly explained. I like the buttons very much…

  • http://sushilbharwani.blogspot.com sushil bharwani

    You have introduced a few new things here. Thanks for that specially the noun project. Also I like it doing without js. What are your thoughts otherwise on making it workable on ie7. Since it wouldnt have been much of effort.

  • http://parscat.com Norik Davtian

    The usage of font for symbols is very interesting, now you are working with vectors instead of pictures, plus one http request for all the symbols in the font.

  • Massimo

    Ciao, ma come posso spostarli in mezzo alla pagina(align=center)? e come posso ridurre la dimensione dei cerchi?

Subscribe
Membership
About the Author