Another Simple Yet Stylish Button Using Css

http://videohive.net/?ref=gimmegfx





Hey guys whats up, I am going to give you a full tutorial regarding how to make a simple but styling button using css.
Css is extremely good and not so hard to understand ?!! Really :d....
There can also be many pre-processor to help to produce a complex or maybe more coding within few lines and it'll compile it towards the css code like Less, Sass, Scss etc.
You is able to see in the picture that it should be created by some simple css properties, you happen to be right :p.


Let's figure out how to make this buttons...

# First there's only one div element or also many div(s) right into a div to provide effect to each one.
# We have created it with passion and experimented with make fast loading.
# In this, We've added 5 div(s) right into a div (in preview but additionally added one div preview).
# We've added these property to each div(s).
.demo div 
background: #111;
width: 6.6em;
margin: 1em auto;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
color: #fff;
text-align: center;
padding: .4em;
font: bolder 1.8em 'Open Sans', sans-serif;
-webkit-box-shadow: 0 1px 3px 7px #aaa;
-moz-box-shadow: 0 1px 3px 7px #aaa;
box-shadow: 0 1px 3px 7px #aaa;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
-ms-transition: .35s ease-in-out;
-o-transition: .35s ease-in-out;
transition: .35s ease-in-out;
cursor: pointer;

# Then we've added these property to offer hover states.
.demo div:nth-child(n):hover 
border-radius: .7em;
-moz-border-radius: .7em;
-webkit-border-radius: .7em;
box-shadow: 0 1px 3px 5px #0f5;
-moz-box-shadow: 0 1px 3px 5px #0f5;
-webkit-box-shadow: 0 1px 3px 5px #0f5;
color: #0f5;

# You can also give like .demo div:hover rather than .demo div:nth-child(n):hover.
# We are giving different color and box-shadow towards the different div(s) using nth-child, nth-child is used to select any specific element in the number of div(s). Like
<div class="demo">
<div>Demo</div>
<div>Demo</div> 
<div>Demo</div> 
<div>Demo</div> 
<div>Demo</div> 
</div>   

# Then I apply the house,
div:nth-child(5) 
   color: red;

# It'll add color red for the 5th div font. Isn't it good :p.
# Here is Live Demo with the buttons...See the Pen View Demo by kaushalya (@kman) on CodePen

# One div button Live Demo can be here :p...

See the Pen gbtcJ by kaushalya (@kman) on CodePen

So here's the Codecast to suit your needs made with love in India.

Also read

CSS Guide to Newbie Blogger part-2

CSS Guide to Newbie Blogger part-1

Thanks of course, if any problem i then will solve it however, you have to comment or call us.




Title Post: Another Simple Yet Stylish Button Using Css
Rating: 100% based on 99998 ratings. 5 user reviews.
Author: SharedTutor

Thank you for visiting sharedtutor.com, If there is criticism and suggestions please leave a comment


thumbnail
About The Author

Someone who always wanted to know about the beauty of the world :)

0 comments