Custom Tag Buttons Widget For WordPress Using CSS

I’ll be sharing the code for custom tag buttons which you can use as a widget in your WordPress Blog. I have designed these buttons using CSS.

So in order to implement these, you’ll need to add two part of codes. One is CSS and other is HTML. You’ll need to put the CSS code at the bottom of style.css file of your WordPress theme. And you’ll have to add the HTML code inside a text widget.

Below is the screenshot of how the custom tag buttons look like. These are very simple buttons with round border. Also when you move your cursor over the button, the color of the button changes into a darker shade.

Custom Tags

CSS Code

[css]

a.tagbutton {
background: #333;
text-transform: uppercase;
color: #fff;
font-size: 10px;
font-family: arial,sans-serif;
text-decoration: none;
opacity: .9;
padding: 4px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: background 200ms linear;
-moz-transition: background 200ms linear;
transition: background 200ms linear;
-webkit-backface-visibility: hidden;
margin: 0 5px 5px 0;
display: block;
float: left;
}

a.tagbutton:hover {
background: #000;
}

[/css]

You can use the CSS code as it is. But if you want to make any changes, feel free to experiment with it. If you are not sure about how to use it, then follow these steps –

  1. Open WordPress Administrators Dashboard
  2. Go to Appearance > Editor
  3. This should open the Stylesheet (style.css)
  4. Go to the bottom of this file and paste the CSS code given above.
  5. Save the file.

HTML Code

The HTML code which i use to display the buttons in the screenshot is given below. Note that, these buttons link to my blog categories.

[html]

<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/how-to/”>How-to </a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/google/”>Google</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/android/”>Android</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/windows/”>Windows</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/wordpresstricks/”>WordPress</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/bloggertricks/”>Blogger</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/optimize/”>Optimize</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/monetize/”>Monetize</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/gaming/”>Gaming</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/tag/windows-8/”>Windows 8</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/web-hosting/”>Web Hosting</a>
<a class=”tagbutton” style=”color:#fff” href=”http://www.codefap.com/category/photoshop-elements-10/”>Photoshop Elements 10</a>

[/html]

You cannot use this code as it is. You’ll need to change it according to your need. For example, if you need a custom tag button to link to google.com then the format for that is given below –

[html]

<a style=”color:#fff” href=”http://www.google.com/”>Google</a>

[/html]

In this way you can write a html code for a button with desired link. And then just copy the html code and use it inside a text widget. If you are unsure about how to use the code then follow these steps –

  1. Open WordPress Administrators Dashboard
  2. Go to Appearance > Widgets
  3. Drag the text widget into your desired Widget Area
  4. Paste the html code inside the content area of Widget. (leave the title empty)
  5. Save the widget.
  6. Go to your blog’s home page and you’ll find the custom tag button in the widget area of your choice.

Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Leave a Reply

Your email address will not be published. Required fields are marked *