Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, to add the arrows to the anchor links, we're going to add some more properties to that call-to-action rule. So after margin, let's hit a return. First, let's set padding. We're going to set 0 on the top, 12 pixels on the right. Because we're going to align the arrow to the right, we want to make sure that the text inside of the anchor link never overlaps that arrow. Zero on the bottom, 0 on the left. Next line, we're going to set background. First property is url.
Inside of the parentheses for url../images/cta_arrow.png. Next, for the repeat properties, we're going to type in "no-repeat," then a space. For the X position, we're going to set right. That will align this graphic to the rightmost edge of the anchor link. Then a space, then 0 pixels for the Y position. Let's hit File > Save. Let's come out to our browser. Let's hit reload.
And in our browser we will see the graphic showing up inside of each one of the anchor links. So it's aligned to the right-hand side. And the 12 pixels is actually the distance from the type here to the outermost area here. So, again, that gives us a little bit of padding so that the background graphic doesn't overlap with the type. Now, the next thing we want to do is add in a hover state, and we want to shift this background graphic up so that we can have it turn blue along with the type turning blue. So now this technique is commonly referred to as a CSS sprite. And the idea here is that we have that single graphic that we created in Photoshop, and on the hover state, we're going to change the Y position so that the graphic actually shifts up inside of the anchor area, giving us the illusion of that arrow changing from orange to blue.
So to do that, let's come back to our CSS file. We're going to start by typing a.cta:hover, beginning and ending bracket. The only property we're going to set in here is going to be background-position. We're going to set right for the X position and -50 pixels for the Y position. If we were to take that slice and measure the top portion of the arrow that's orange in that Photoshop slice and measure down to the top of the blue area, we will come up with 50 pixels.
So this is the amount we want to shift that sprite when somebody rolls over one of those call-to-action links. So let's hit File > Save. Let's come back out and preview this in a browser. So now when I roll over these links, the illusion is that the arrow is actually changing color, but in reality, what we're doing is taking that background graphic and shifting it up so that the position of the blue triangle matches exactly where the orange triangle was. Now that we have our call-to-action link styled, next we're going to work on the styles inside of the promo areas.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 43569 Viewers
119 Video lessons · 54688 Viewers
65 Video lessons · 14870 Viewers
113 Video lessons · 83030 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.