Learn to customize your own blog with confidence

Code it Pretty is an archive of tutorials from 2012-2015. Tutorial details may be outdated. More Info

Ombre Social Media Buttons - The HTML and CSS

ombre-inspired social media buttons with HTML and CSS, a step-by-step tutorial

Now that you've found the RGB value of your favorite color and , you're all set to start building your social media menu!

If you're already comfortable with HTML & CSS, you can jump straight to the code on Codepen. Otherwise, follow along :)

Getting Started

I'm going to show you how to build this social media menu in Mozilla Thimble, a free, web-based HTML & CSS editor. Thimble is awesome because it gives you a live preview of your project as you type in the HTML and CSS. And, it gives you hints to help you catch and prevent errors, so it's helpful for beginners.

To use Thimble, go to thimble.webmaker.org and press the "Start from Scratch" button.

mozilla thimble homepage

On the next page, you'll see that the screen is split in half, with an Editor pane on the left and a Preview pane on the right.

blank mozilla thimble editor

Delete the "<p>Make something amazing with the web</p>" paragraph and get ready to start writing the HTML for your social media menu!


We're going to make an unordered list out of your social media links.

An unordered list is a bullet-point list. We start an unordered list with a <ul> tag and close it with a </ul> tag. UL stands for "Unordered List". We're going to give our social media links list the class of "ombre-social-media" so we can apply CSS styling to it later. So, in your Thimble editor, between the <body> </body> tags, type in:

<ul class="ombre-social-media">

Each list item within this unordered list is a link wrapped in <li> tags. LI stands for "List Item".

We're going to give each list item a class named after the social media network the list item represents. So, for example, let's say you're starting your social media menu with a link to your Twitter account. You'd mark it up like this:

 <ul class="ombre-social-media">
     <li class="twitter-soc"><a href="http://www.twitter.com/codeitpretty">Twitter</a></li>

See the class "twitter-soc"? Later when you add the CSS, you'll give the Twitter link its own unique background color by referencing the twitter-soc class.

The <a href="http://www.twitter.com/codeitpretty">Twitter</a> segment of the list item is a link to Twitter. The word "Twitter" between the angle brackets is the clickable link to Twitter.

Using the Twitter example above as a template, keep adding new list items between the <ul></ul> tags until you've added all of your social media links. When you're done, you'll have markup that looks something like this:

<ul class="ombre-social-media">
     <li class="twitter-soc"><a href="http://www.twitter.com/codeitpretty">Twitter</a></li>
     <li class="googleplus-soc"><a href="https://plus.google.com/105816937910419028289">Google+</a></li>
     <li class="pinterest-soc"><a href="http://www.codeitpretty.com/pinterest">Pinterest</a></li>
     <li class="tumblr-soc"><a href="http://codeitpretty.tumblr.com">Tumblr</a></li>
   <li class="bloglovin-soc"><a href="http://www.bloglovin.com/blog/3590598/code-it-pretty">Bloglovin'</a></li>
     <li class="email-soc"><a href="mailto:marie@codeitpretty.com">Email</a></li>
     <li class="rss-soc"><a href="http://www.codeitpretty.com/feeds/posts/default">RSS</a></li>

And, in the Preview pane, you'll have a list of links that looks like this:

unstyled social media links

Not exactly glamorous, I know. That's what CSS is for!


Now we're going to add some CSS to your Thimble. To do that, find the </title> tag up top, and add <style> </style> tags right beneath it, like this:

style tags in head of HTML document on Mozilla Thimble

All of the CSS that follows goes in-between those style tags.

Laying Out the Menu

First, we'll set style rules for the entire menu. Here we'll remove the bullet points on the link list. We're also setting the width of the menu, centering the text, and specifying the font style, weight, and size. Enter this between the <style></style> tags:

.ombre-social-media {
        padding: 0;
        list-style: none;
        width: 150px;
        text-align: center;
        font-family: 'YOUR FONT NAME', sans-serif;
        font-weight: 400;
        font-size: 24px;

Replace 'YOUR FONT NAME' with the font you chose in . I'm using Raleway. I set a sans-serif fallback font, but you can change that to serif if you'd prefer. You can also change the menu width, font weight, and font size if you'd like. Here's what your preview pane will look like if you're using the same font as me:

CSS step one demonstration

Next, we're going to remove the underline under the social media links and give them a bit of padding so they're not so close together. Enter this directly below the closing curly brace } of the first piece of CSS:

.ombre-social-media a {
        text-decoration: none;
        display: block;
        color: black;
        padding: .1em 0 .15em 0;

We just set the color of the text to black temporarily, so you can see the text while you work. We'll change that later once everything's in place. Your Preview pane should now look like this:

css step two

So, in the first step, we removed the underline on the social media links. But, wouldn't it be nice if the links were underlined when your users hover over them? I think so! Here's how to set that up. Add this below the closing curly brace of the 2nd CSS segment:

 .ombre-social-media a:hover {
        text-decoration: underline; 

While we're at it, let's set a :focus style for your readers who use keyboard navigation. This styling will outline and underline your links when they're targeted with the tab key on your reader's keyboard.

      .ombre-social-media a:focus {
        outline: 1px dotted gray;  
        text-decoration: underline; 
        overflow: hidden;    

After you've added those two CSS rules, hover your cursor over one of the links and you'll see the underline reappear. Move your cursor away and it disappears again.

hovered link states
Setting the Background Colors

OK, we've got the rough outline of a social media menu, but there's no ombre effect yet! Here's where your RGB color and your individual classes for each list item come into play.

To create the ombre effect, we're going to set the background color for each of the social media links. Let's start at the top. My first link goes to Twitter, so here's how I'd style that link.

.twitter-soc {
        background-color: rgba(136, 87, 119, .3);

Replace .twitter-soc with the class you set for your first social media link, and replace the first three numbers in the parentheses after rgba with your chosen color's rgb value. I used the rgb value for my favorite shade of purple and set the last number to .3, for 30% opacity, but you can start lower or higher if you'd like. Opacity ranges from .1 (10% opacity) to 1 (100% opacity), so use that range as a guide for determining where to start.

To keep the ombre effect going, add background color styling for your next social media link and give it slightly higher opacity. For example, I styled the next three links like this:

 .googleplus-soc {
        background-color: rgba(136, 87, 119, .4);
.pinterest-soc {
        background-color: rgba(136, 87, 119, .5);
.tumblr-soc {
        background-color: rgba(136, 87, 119, .6);

Keep going, increasing opacity as you go, until you've added all of your social media links, and your menu looks like this:

menu at the next to last stage

Now that you've filled in the background for all of the links, you can change the text color to something else if you'd like. To do that, go back to the .ombre-social-media a styling and change the color: rule to another color. I went with white.

Adding the Menu to Your Blog

So now you've got a beautiful social media menu working on Thimble, but you still need to move it onto your blog! Here's how:

Adding the menu to Blogger

Copy and paste the HTML portion of your social media menu (everything between the <body> </body> tags) into an HTML/JavaScript gadget on your blog. Save the gadget.

Then, copy and paste all of the CSS (everything between the <style></style> tags) into the template designer by going to Template > Customize > Advanced > Add CSS.

Press the "apply to blog" button to apply your styling to the menu. You should see the styled menu appear in the preview screen below.

Adding the menu to self-hosted Wordpress

Copy and paste the HTML portion of your social media menu (everything between the <body> </body> tags) into an Text widget on your blog. Save the widget

Then, copy and paste all of the CSS (everything between the <style></style> tags). If you're using a child theme for your blog, add the CSS to your child theme's style.css file. If you're not using a child theme, you can use Jetpack's "Custom CSS" feature to add the CSS to your blog.

Adding the menu to Typepad

Go to Content > Widgets > Embed Your Own HTML and press "add this module". Copy and paste the HTML portion of your social media menu (everything between the <body> </body> tags) into the new HTML module. Then, copy and paste all of the CSS (everything between the <style></style> tags) into your Custom CSS field by going to Blogs > Design > Custom CSS. Press "Preview" to preview the changes, then press "Save Changes" to apply them to your live blog.

How To Install Google Web Fonts on Your Blog

This is part two of my , but these instructions work for anyone who'd like to install Google Web Fonts on Blogger, self-hosted WordPress, or Typepad.

Google Web Fonts are free, easy to install, and lovely. Let's check them out!

Browse Google Web Fonts

Here's the fun part! To browse the Google Fonts library, go to: www.google.com/webfonts.

There's over 600 fonts in the collection right now, and they keep adding more, so you'll want to sort them.

From the menus on the left, you can organize the fonts by style. Up top, you can enter your own text in the "Preview Text" field. If you're following along with the social media menu tutorial, enter the names of your social media services so you can see how they'll look in your menu.

Options for sorting the fonts by name, date added, number of styles, and popularity are also at the top of the screen.

If you're going to use a combination of fonts for your project, or if you'd like to preview multiple font sizes at once, check out my buddy Chip Cullen's Font Combinator for expanded Google Fonts browsing.

Install Your Google Web Font

Once you've decided on your favorite font, it's time to install!

Google Web Fonts on Self-Hosted WordPress

There are two ways to install Google Web Fonts in self-hosted WordPress. You can either use a font management plugin, or add the font to your theme manually. If you'd like to go the plugin route, WP Google Fonts has you covered.

If you'd like to add the font manually there's a great tutorial at WP Beginner.

Installing on Blogger or Typepad

The first few steps for installing Google Web Fonts on Blogger or Typepad are the same.

To get started, click the "Quick Use" button to install a single font, or the "Add to Collection" button to select more than one font. If you're using a collection, press the "Use" button at the bottom of the screen after you've added all of your fonts to your collection.

On the next screen, if the font you've chosen has multiple styles, you'll be asked to choose the styles you want.

If you're only going to use the font for one part of your blog — for example, if you're choosing a font exclusively for your social media menu — you should select only the style you plan to use for your design. If you'd like to use the font throughout your blog, choose a normal, bold, and italic style if they're offered.

After you've made your style selections, scroll down and you'll be asked to choose a character set.

For many fonts, the selection is grayed out on the only available character set — Latin. The Latin character set is used in English and European languages. You may also see an option for "Latin Extended" — only choose this if your language includes accented letters.

After you've made your selections, it's time to install your font!

Installing Google Web Fonts on Blogger

To install your font on Blogger, first back up your template. To do that, go to "Template" and click the "Backup/Restore" button in the upper right. Save the resulting .xml file.

After you've backed up your template, copy the Google Web Fonts code from the "Standard" tab.

Next, open your template by going to Template > Edit HTML.

Hover your cursor over your code, click once, then press CTRL and F at the same time (PC) or Command & F (Mac) to open a search box inside the template. Type <b:skin> in the search box and press enter. Your template code will jump down to the <b:skin> tag and highlight it in yellow.

Paste the Google Web Fonts standard code directly above the <b:skin> tag. Then, enter a trailing slash (/) right before the closing angle bracket (>) of the web fonts code, like this:

If you chose to add the Latin Extended version of your font, change any ampersands (&) in your font link to &amp; so they will encode properly.

Press the "Save Template" button and you're all set!

Installing Google Web Fonts on Typepad

Typepad users should copy the @import code option for Google Web Fonts.

Go to to Design > Content and click the pencil icon on your Navigation Bar.

Paste the code into your navigation bar module, and wrap it in <style> tags, like so:

@import url(http://fonts.googleapis.com/css?family=FONTNAME);

Press the "OK" button at the bottom of the navigation bar module to save your update.

Test Your Installation

Once you have your font installed, you should check to make sure it's working. You can quickly test your font by adding an HTML widget/gadget to your blog with a span style that uses your new font. Here's how:

In self-hosted WordPress, open a new Text widget. In Blogger, use a new HTML/JavaScript gadget. In Typepad, go to Content > Widgets > Embed Your Own HTML and press "add this module".

Enter this into your new widget/gadget:

<span style="font-family: 'Font Name Here';">Testing custom font</span>

Replace 'Font Name Here' with the name of the Google Web Font you chose. Save your gadget/widget and check out your blog. You should see "Testing custom font" in the font of your choice. Good job! You can delete the test widget now.

What's Next?

If you're following along with the , you're ready to use your RGB color and your favorite font to make a stylish social media menu! Move on to Part Three: .

If you want to learn how to use your new font for another part of your blog, check out the Blog Font Style with CSS tutorial series.

Ombre Social Media Buttons with HTML and CSS

ombre-inspired social media buttons with HTML and CSS, a step-by-step tutorial

Ah, ombre! I see this "dip dye" style everywhere, from cakes to dresses to hairstyles, and I think it makes a beautiful backdrop for a simple set of social media links.

In this three-part tutorial, I'll take you step-by-step through the entire process of creating an "ombre" social media menu for your blog with HTML and CSS. And I really do mean step-by-step; you don't have to know anything about HTML or CSS to use this tutorial.

If this is your first time digging into HTML & CSS, just take it slow and you'll learn a lot :) If you're comfortable with HTML and CSS already, you can jump straight to the source code on CodePen.

What You'll Make

In this tutorial series, you'll learn to make a layered "ombre" social media menu to place in your blog's sidebar or footer. You can a see demo on CodePen.

plain HTML transformed with CSS

You'll choose your own colors, fonts, and social media services to make the menu your own. But, if you'd like to use the same colors and fonts as me, I don't mind sharing!

What You Need

All you need to use this tutorial is:

  • A blog with the option to add sidebar or footer gadgets/widgets
  • The option to add custom CSS to your blog.

Blogger, self-hosted Wordpress, and Typepad Unlimited users, you're are all set!

What You'll Learn In Part One

  • How to find the RGB value of your favorite color.

What You'll Learn in Part Two

  • How to select & use a free web font from Google's vast font library.

What You'll Learn in Part Three

  • How to make a list of links using an HTML unordered list.
  • How to position and style your social media menu with CSS.
  • How to vary color opacity with CSS.

Ready to pick a color? Let's get to it!

Find Your Color Value

This ombre color effect is created by varying the opacity of a single color, starting from a low opacity and graduating up to full (or almost full) opacity. So, to get started, all you need to do is select one color.

To vary the opacity of the color, we'll need to find its RGB value. RGB is a color model designed to display colors on electronic screens — RGB stands for Red, Green, Blue.

If you have Photoshop, GIMP, or another image editing tool, you can grab the RGB value with the eyedropper tool. If you don't have image editing software, there are three ways to get the RGB value of a color online.

Pull the Color from an Image

To get your RGB color from an image, use Adobe's Kuler. You'll need to sign up for a free Adobe account to use Kuler (if you don't have one already). Once you've signed up, you can upload an image and select up to five colors from the image.

After you've made your color selections, save the color theme (you can save it publicly or privately). Once the theme is saved, you can access it under Mykuler > Themes. Select your color theme, then click the "sliders" icon at the right to go into the theme editor.

On the next screen, copy the RGB value for the color you'd like to use on your social media menu (click to enlarge the pic).

Pull the Color from a Website

If you use Firefox or Chrome, you can use Colorzilla to pick a color from a page on the web. Make sure to set the "Auto Copy" setting to "rgb" to pick the RGB value of your color.


If you already know the HEX number of your color, you can pop it into this online Hex-to-RGB converter.

The Next Step

Now that you know the RGB value of your favorite color, you're ready to .

Readers' Buttons

I have a little gallery of readers' buttons on my Google+ page. Check them out for color & font inspiration!

Two Great Google Analytics Solutions for Blogs

There's more to +Google Analytics than visits and pageviews. There's so much more that it can be overwhelming, especially if you're new to it.

But, earlier this week, Google released a suite of Analytics Solutions that take you straight to the "good stuff" to help you understand the data from your blog faster than ever.

Bloggers on any platform can use these new tools — all you need is Google Analytics installed on your blog. It helps if you've used it enough to know your way around the interface, but you don't need to be an Analytics champion to put these new tools to work.

(If you've never used Google Analytics before, check out the official Getting Started Guide, then come back here when you're done.)

You can browse the full collection of Analytics Solutions in the new Gallery. There are lots of them, and they're designed for many different purposes. So, I've gone through them all to find two great, easy-to-use solutions for bloggers. Let's check them out!

Custom Report: (not provided) Analysis

If you get a lot of traffic from Google searches, you probably see (not provided) up near the top of your "Keywords" list on your Traffic Sources Overview screen in Analytics.

The (not provided) "keyword" means that your visitor was logged into Google when they made the search that brought them to you. This is a privacy measure. As a Google user, I appreciate it. But, as a blogger, it's frustrating, because it makes it harder to determine what search terms brought readers to my blog.

The (not provided) Analysis report doesn't reveal the search terms of your logged-in Googlers, but it does reveal what page those visitors landed on. This can give you a pretty good idea of what your readers were looking for when they found you.

This custom report sets itself up for you with just a few clicks. To use it, go to the solutions gallery and set the first dropdown menu to "Custom Report", then look for "(not provided) Analysis" below.

Click the "download" link under "(not provided) Analysis", and you'll go to a sign-in screen for Google Analytics. Once you've signed in, you'll be prompted to select a profile if you have more than one website tracked in your account. If you just have one, it will take you straight to that site's profile.

As soon as the report is installed, you'll see the report screen. Here you can see the top landing pages for your (not provided) searches, along with other stats like visit percentage, bounce rate, and time on site. From this information, you can make an educated guess about what all those (not provided) visitors were seeking!

To get to the report the next time you log in, click "Customization" in the banner at the top of the page and you'll see your custom reports in the left sidebar.

Advanced Segments: Engaged Traffic

Advanced segments let you focus on very specific types of traffic. I'm going to show you how to install and use the "Engaged Traffic" advanced segment so you can get a feel for what they can do for you. There are many more advanced segments in the Gallery, and you can get a complete explanation of how to use them in the Google Analytics documentation.

The "Engaged Traffic" advanced segment helps you learn more about the readers who enjoy your site the most — in analytics terms, the readers that view more than 3 pages on your blog and stay for more than 3 minutes. Using this advanced segment, you can find out where in the world they're coming from, what pages they read, what brought them to your blog, and much more. If you have AdSense associated with your Google Analytics account, you can also see how much AdSense revenue readers in this group brought you.

To add the "Engaged Traffic" segment to your blog, set the first dropdown menu in the solutions gallery to "Advanced Segment", then click the "download" link under "Engaged Traffic".

On the next screen, choose the profile to apply the segment too (if you have more than one profile), and rename the segment if you like. It defaults to "Really Engaged Traffic", which works for me!

After you've decided on the name, press the "Create" button. On the next screen, you'll see that the parameters for the advanced segment have already been filled in. The "Page Depth" of 3 means that it will show visits with 3 or more pageviews. The "Visit Duration" of 180 means that it will show visits over 3 minutes (click the image to enlarge).

Press the "Save Segment" button at the bottom of the page to add the segment to your account.

Using Your Advanced Segment

Once you've set up your advanced segment, you can apply it to any Google Analytics report by clicking "Advanced Segments" near in the top navigation and clicking the checkbox next to your advanced segment (click to enlarge the screenshot).

advanced segments example

If I wanted to find out which pages of my blog the Really Engaged Readers liked best, I'd go to the Content > Overview report and activate the "Really Engaged Readers" segment. The top ten pages my most engaged readers visited will show up at the bottom of the page. It's interesting to compare the favorite pages of engaged visitors with the pages that are popular with the average visitor — sometimes they're just about the same, but they can be surprisingly different.

Your most engaged visitors are often your biggest fans, so use the information you gather here to plan new content that makes them smile!

Keep Experimenting!

Now that you've been introduced to Google Analytics Solutions, you're ready to experiment. Take a little time to browse through the gallery and try out a new solution. Feel free to experiment and try different solutions, even if you're just curious about what they do. You can't hurt your blog or your data by trying out different solutions, so don't hold back!