How to create Horizontal Menubar with CSS?

           2 comments   
Creating a Horizontal Menubar is not so difficult but requires your attention towards each small part of the menubar.

Creating horizontal menubar is not so difficult as it seems.

If you want to learn how to create a stunning horizontal menubar then give it is try.

You can test this coding in our latest online editor 2015.

<html>
<head>
<style type="text/css">
* 
{
   margin: 0; padding: 0;
}

 body 
{
   font-family: 'Lucida Grande';
   font-size: 10px;
   background: #eeeeee;
}

 .navigation 
{
   margin: 200px 20px;
   background: #fff;
   overflow: hidden;
   width: 760px;

   box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.5);
}

 .navigation li 
{
   width: 120px; border-left: 5px solid #666;
   float: left;
   //cursor: pointer;
   list-style-type: none;
   padding: 10px 50px 10px 15px;

   -webkit-transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in;
   -o-transition: all 0.3s ease-in;
}

 .navigation li h2 
{
   font-family: georgia;
   font-weight: normal;
   font-style: italic;
   font-size: 12px;
   margin-bottom: 5px;
   line-height: 16px;
}

 .navigation li p
{
   font-size: 11px;
   color: #999;
 
   -webkit-transition: all 0.1s ease-in;
   -moz-transition: all 0.1s ease-in;
   -o-transition: all 0.1s ease-in;
}
.navigation li:hover 
{
   background: #333;
   border-left: 5px solid #000;
}
.navigation li:hover h2 
{
   font-weight: bold;
   color: #fff;
}
.navigation li:hover p 
{
   color: #ccc;
   padding-left: 5px;
}
</style>
</head>
<body>
<ul class="navigation">
<li>
   <h2>Home</h2>
   <p>Learn CSSBasicTips</p>
</li>
<li>
   <h2>LearningZone</h2>
   <p>CSS/HTML/Webpage</p>
</li>
<li>
   <h2>About</h2>
   <p>Who we are?</p>
</li>
<li>
   <h2>Contact us</h2>
   <p>For more Coding</p>
</li>
</ul>
</body>
</html>

Output for Horizontal Menubar:-

  • Home

    Learn CSSBasicTips

  • LearningZone

    CSS/HTML/Webpage
If you have any doubt or facing any difficulty in getting output, do let us know.

How to create Social Icons with CSS?

           , , , ,      No comments   
How to create social media icons with the help of CSS coding.

There are several third party tools or websites which are offering social media icons with a simple click.

Do you think that why they are offering you free service?

I hope you don't bother about this. But, I have few reason behind these free offerings.

Why we should create our social icons?

As per my observation, these below are top reasons that we should not use third party social icons on our websites/blogs.

And we should try to create our own social icons.
  1. Slowdown Host website
  2. Automatically gives Backlink to their website
  3. Add dofollow link for their websites (A thought)

However, I too, use these free services on my blogs but most of the time I use self created social media icons on my website.

So in this post, I am going to discus an easy way to create social media icons.

And all you can do with the help of little knowledge of CSS coding.

Don't worry, if you don't know about CSS, I will explain to you. Learning CSS is very easy and interesting too.

Create Social Media Icons

<html>
<head>
<style type="text/css">
#youtube 
{
  background-image: url(youtube.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
background-origin: border-box;

  display: inline-block; 
  width: 100px; 
  height: 100px;
  border-width: 50px;
  border-color: rgba(0,0,0,0);

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -ms-transition: 2s ease;
  -o-transition: 2s ease;
  transition: 2s ease;
}

 #youtube:hover 
{
  border-width: 0;
  border-color: rgba(0, 0, 0, 0.5);
}
#facebook 
{
  background-image: url(facebook.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-origin: border-box;

  display: inline-block; 
  width: 100px; 
  height: 100px;
  border-width: 50px;
  border-color: rgba(0,0,0,0);

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -ms-transition: 2s ease;
  -o-transition: 2s ease;
  transition: 2s ease;
}

 #facebook:hover 
{
  border-width: 0;
  border-color: rgba(0, 0, 0, 0.5);
}
#twitter 
{
background-image: url(twitter.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-origin: border-box;

  display: inline-block; 
  width: 100px; 
  height: 100px;
  border-width: 50px;
  border-color: rgba(0,0,0,0);

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -ms-transition: 2s ease;
  -o-transition: 2s ease;
  transition: 2s ease;
}
#twitter:hover 
{
border-width: 0;
border-color: rgba(0, 0, 0, 0.5);
}
#pinterest 
{
  background-image: url(pinterest.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-origin: border-box;

  display: inline-block; 
  width: 100px; 
  height: 100px;
  border-width: 50px;
  border-color: rgba(0,0,0,0);

  border-radius: 100%;
   -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -ms-transition: 2s ease;
  -o-transition: 2s ease;
  transition: 2s ease;
}
#pinterest:hover 
{
  border-width: 0;
  border-color: rgba(0, 0, 0, 0.5);
}
.icon_one
{
  border-style: inset;
}
.icon_two
{
  border-style: outset;
}
.icon_three
{
  border-style: groove;
}
.icon_four
{
  border-style: ridge;
}
</style>
</head>
<body>
<div href="#" class="icon_one" id="youtube"></div>
<div href="#" class="icon_two" id="facebook"> </div>
<div href="#" class="icon_three" id="twitter"></div>
<div href="#" class="icon_four" id="pinterest"></div>
</body>
</html>


Copy and paste above CSS coding in our latest Online Editor for 2015 to check output live.

Points to Remember

Please change the source code of each image where you have saved or copied your images. Otherwise it will show a blank page of screen.

 If you find any difficulty in creating these fancy social media icons, do let me know, I will help you out.

How to create Round Buttons with CSS?

           , , , , ,      No comments   
How to create round buttons in CSS? This is very easy and CSSBasicTips has proven it to be easy in this post.


Create Round Buttons

There are thousands of examples for creating stunning menubar for your website or blog.

But as per my observation, still there is not any simple way of creating these menubar buttons.

If you stuck over there on any website or you really want to create horizontal or vertical menubar for your blog/website, then this post is meant for you.

Coding for creating Round Buttons with CSS

<html>
<head>
    <style type="text/css">
    .pretty_round-button 
    {
        width:80px;
        height:80px;
        line-height:80px;
        border: 5px solid #ffffff;
        border-radius: 50%;
        color:#ffffff;
        text-align:center;
        text-decoration:none;
        background: #ff2354;
        box-shadow: 0 0 5px black;
        font-size:20px;
        font-weight:bold;
display:inline-block;
    }
    .pretty_round-button:hover 
    {
        background-color: #efefef;
color:#ff2354;
    }
    </style>
</head>
<body>
    <a href="" class="pretty_round-button">
Home
    </a>
    <a href="" class="pretty_round-button">
About
    </a>
    <a href="" class="pretty_round-button">
Contact
    </a>
</body>
</html>

Output of above cod is as shown below:-



Home About Contact

Hover your mouse pointer and see the hover effect of the buttons. Creating horizontal menu buttons with css is as simple as 123.

How to create Vertical Menubar easily?

This is very simple and you have to just remove one word from the above coding of creating horizontal menubar.

Just remove "Inline" from the coding "Display" and you code will look like:-

display:block;

If you have any problem in creating horizontal or vertical menubar in CSS, do not hesitate, just comment in the below section and we will give instant help.

You can also check this coding for live output with the help of our Online Editor of 2015.