Another Simple Yet Stylish Button Using Css

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 go...





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.



COMMENTS

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

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

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

Name

blogging,255,computing,705,ebook,53,ebooks,354,freebies,358,graphics,225,IFTTT,3,internet,207,mobile,252,news,99,sharedtutor,78,slider,2,video tutorials,5,VideoHive,1156,YouTube,1005,
ltr
item
SharedTutor Tutorials For Everyone: Another Simple Yet Stylish Button Using Css
Another Simple Yet Stylish Button Using Css
http://3.bp.blogspot.com/-PAQFH53D5UU/Uf-bstIS4ZI/AAAAAAAABAE/bMHKpOy4pVM/s320/button-using-css.JPG
http://3.bp.blogspot.com/-PAQFH53D5UU/Uf-bstIS4ZI/AAAAAAAABAE/bMHKpOy4pVM/s72-c/button-using-css.JPG
SharedTutor Tutorials For Everyone
http://www.sharedtutor.com/2013/08/another-simple-yet-stylish-button-using.html
http://www.sharedtutor.com/
http://www.sharedtutor.com/
http://www.sharedtutor.com/2013/08/another-simple-yet-stylish-button-using.html
true
1970043136941886328
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy