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.
0 comments:
Post a Comment