Kida's World

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!

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.

<div class="appstorebutton iphone">
  <a href="#"><p><small>Available on the iTunes</small> App Store</p></a>
</div>

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.

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!

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.

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.

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.

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.

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.

<div class="appstorebutton iphone">
  <a href="#"><p><small>Available on the iTunes</small> App Store</p></a>
</div>
 
<div class="appstorebutton ipad">
  <a href="#"><p><small>Available on the iTunes</small> App Store</p></a>
</div>
 
<div class="appstorebutton mac">
  <a href="#"><p><small>Available on the Mac</small> App Store</p></a>
</div>

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).

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.

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.