How To Create a Stylish Keyword Tag in pure HTML/CSS

Tag or specifically the keyword tags are used in your WordPress website to assist visitors in finding relevant article that based their need. Tag is like index in a book and more specific than category. They are incredibly common on a website, but a simple text isn’t enough. Why you don’t make your post tags more stylish and interesting for visitors?

In this tutorial you’ll learn a step by step to make a stylish tag in HTML/CSS based our Free Dark Velvet UI Kit, you can download all web ui elements here for free!
Here the final result of our stylish post tag:

How to Create Stylish Post Tag HTML-CSS

Step 1: Preparation

The first step that you should do is setting up the folder structure.

How to Create Stylish Post Tag HTML-CSS

You can ignore the images folder since it’s optional.

Step 2: The HTML Structure

Save the HTML script below in file index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Tags HTML CSS</title>
        <link rel='stylesheet' type='text/css' href='/articles_and_tutorials/how_to_create_stylish_keyword_tag_html_css/styles2.css' />        
    </head>
    <body>
    <div class="container">
        <div id="tagWrapper">
            <ul class="tags"> 
                <li class="tag-body"><a href='#'>Fashion Culture</a></li>
            </ul>
        </div>
    </div>
    </body>
</html>

Here our first look of index.html:

How to Create Stylish Post Tag HTML-CSS

Step 3: The Basic CSS Style

You’ll create the page background first, then make the container that will appear in the center page. Save this script below on style.css file:

body{
    background: #2c3941;
    font-size: 16px;
}

.container{
    height: auto;
    max-height: 300px;
    width: auto;
    max-width: 25%;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;    
    top:0;
    padding: 25px !important;
}

li.tag-body a{
    text-decoration: none;
    color: #dcdcdc;
    text-shadow: 1px 2px 0px rgba(30, 30, 30, 0.3);
}

Here the result after we add style.css:

How to Create Stylish Post Tag HTML-CSS

The next is, make it more presentable. To be more easily, we’ll divide it into 3 section: tag-body, tag-arrow, dan tag-hole.

How to Create Stylish Post Tag HTML-CSS

Step 4: Add Style on Tag-Body

We’ll adding style for tag-body by add this script below inside our style.css file:

li.tag-body{
    font-family: "Cabin SemiBold", verdana, serif;
    font-size: 13px;
    display: inline-block;
    color: #fff;
    position: relative;
    padding: 8px 10px 8px 15px;    
    margin: 0 25px 20px 0;
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255, 0.2);    
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: rgba(86,96,103,0.9);
}

Here the result:

How to Create Stylish Post Tag HTML-CSS

The next is adding gradient effect, still on the same class: li.tag-body please add this script:

/*Cross browser gradient*/   
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(186,96,103,0.7)), to(rgba(64,72,80,0.7)));
   background-image: -webkit-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7));
   background-image: -moz-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7));
   background-image: -o-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7));
   background-image: linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)), url(/articles_and_tutorials/how_to_create_stylish_keyword_tag_html_css/images/bg_1.png);

The result will be like this:

How to Create Stylish Post Tag HTML-CSS

Then to make it more interesting we’ll add the shadow effect by adding this script:

/*shadow*/
    -webkit-box-shadow: 1px 2px 1px -1px rgba(30, 30, 30, 0.7);
    -moz-box-shadow:    1px 2px 1px -1px rgba(30, 30, 30, 0.7);
    box-shadow:         1px 2px 1px -1px rgba(30, 30, 30, 0.7);

Check the result below:

How to Create Stylish Post Tag HTML-CSS

Step 5: Adding Tag-Arrow Style

To create tag-arrow, there are several methods. Not a few are using triangle methods and there are triangle generator tool that will help you. But in this tutorial we’ll start by creating a square box then rotate it 45 degrees.

The benefit of this method then triangle are, we can add background, gradient and border. The following is the description of the process:

How to Create Stylish Post Tag HTML-CSS

Okay, let’s continue. First we’ll make a shape at once setting up the z-index: -1 so the tag-arrow will appear behind the tag-body.

/*Arrow left*/
li.tag-body:before {
    display: inline-block;
    height: 22px;
    width: 22px;
    position: absolute;
    left: -12px;
    top: 4px;
    content: "";
    background-color: rgba(86,96,103,0.9);
    z-index: -1;
}

See the result below:

How to Create Stylish Post Tag HTML-CSS

Then use transform to rotate 45 degrees, still in the same class: li.tag-body: before please add the css script below:

/*transform shape*/
    -webkit-transform:scaleX(.6) rotate(45deg);
    -moz-transform:scaleX(.6) rotate(45deg);
    -o-transform:scaleX(.6) rotate(45deg);
    transform:scaleX(.6) rotate(45deg);  

Here the result:

How to Create Stylish Post Tag HTML-CSS

Looks neat yet? We’ll make it better. But before that, please take a look our “transform shape” script above. As you can see, we use scaleX() function. This function will make the shape of a rhombus not square. The following is a comparison between use and without use of scaleX().

How to Create Stylish Post Tag HTML-CSS

Back to make our tag more better. As well as on tag-body, we also add background and box-shadow to the border. Please add the css code below:

/*Gradient*/
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(86,96,103,0.7)), to(rgba(64,72,80,0.7)));
    background-image: -webkit-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7));
    background-image: -moz-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7));
    background-image: -o-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7));
    background-image: linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)), url(/articles_and_tutorials/how_to_create_stylish_keyword_tag_html_css/images/bg_1.png);
    
    /*Shadow*/
    -webkit-box-shadow: 1px 2px 1px -1px rgba(30, 30, 30, 0.7);
    -moz-box-shadow:    1px 2px 1px -1px rgba(30, 30, 30, 0.7);
    box-shadow:         1px 2px 1px -1px rgba(30, 30, 30, 0.7); */
    
    /*Border*/
    border-left: 1px solid rgba(255,255,255, 0.2);
    border-bottom: 1px solid transparent;

Here, the result:

How to Create Stylish Post Tag HTML-CSS

Step 6: Adding style on Tag-Hole

The next step that very important too is the tag-hole, to give the hole effect:

/*Create hole*/
li.tag-body:after {
    content:''; 
    width:8px;
    height:8px; 
    background:#2f3b44;
    border-radius:20px;
    position:absolute;
    top:12px;
    left:-4px;
    z-index:9999;
}

See the result:

How to Create Stylish Post Tag HTML-CSS

Next, still in the same class li.tag-body:after please add the css code below:

/*Create hole effect*/
    -webkit-box-shadow: inset -1px 2px 2px -1px rgba(30, 30, 30, 1);
    -moz-box-shadow:    inset -1px 2px 2px -1px rgba(30, 30, 30, 1);
    box-shadow:         inset -1px 2px 2px -1px rgba(30, 30, 30, 1);
    border-bottom: 1px solid rgba(225,225,225,0.4);

The result as the image below:

How to Create Stylish Post Tag HTML-CSS

Step 7: Make the hover style

As the final steps in this tutorial, we’ll add the hover effect on our tag. We will decrease the opacity value on the gradient.

/*Hover Effect*/
li.tag-body:hover, li.tag-body:hover:before{    
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(118,123,127,0.7)), to(rgba(64,72,80,0.7)));
   background-image: -webkit-linear-gradient(rgba(118,123,127,0.7), rgba(64,72,80,0.7));
   background-image: -moz-linear-gradient(rgba(118,123,127,0.7), rgba(64,72,80,0.7));
   background-image: -o-linear-gradient(rgba(118,123,127,0.7), rgba(64,72,80,0.7));
   background-image: linear-gradient(rgba(118,123,127,0.7), rgba(64,72,80,0.7)), url(/articles_and_tutorials/how_to_create_stylish_keyword_tag_html_css/images/bg_1.png);   
}

Like this:

How to Create Stylish Post Tag HTML-CSS

Then to clarify the hover effect, please add some li inside our index.html file. Like this:

<div class="container">
        <div id="tagWrapper">
            <ul class="tags">
                <li class="tag-body"><a href='#'>Design</a></li>-->        
                <li class="tag-body"><a href='#'>Fashion Culture</a></li>        
                <li class="tag-body"><a href='#'>Electricity</a></li>
                <li class="tag-body"><a href='#'>Kitchen</a></li>
                <li class="tag-body"><a href='#'>Cinema</a></li>
                <li class="tag-body"><a href='#'>Anniversaries</a></li>
            </ul>
        </div>
</div>

Here the result:

How to Create Stylish Post Tag HTML-CSS

Conclusion

You just finished the tutorial on how to make more stylish post tag in pure html/css. Hope you found this tutorial is useful. And if you have any questions, please use the comment below. Enjoy!

- Written by Mukhlasin

Leave a Reply

 

Amazingly Beautiful WordPress Themes