Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Monday, February 25, 2013

Awesome And Stylish Pure CSS 3D Pressable Button

This Article Was Live On: Monday, February 25, 2013 And Till Now Have4 comments.
Awesome And Stylish Pure CSS 3D Pressable Button

Internet expands the design industry and web standards are changing and being improved almost every year.Although still having problems with browsers, the abilities of CSS3 allows more control on animated elements in web design. You know coding size is reduced by CSS so we see more and more animations on websites. In today’s post we've collected 3D animated ”press-able” buttons created with pure CSS3. You can easily integrate them in your websites or blogs. You may also take a look at our CSS tutorials.

We collect some awesome collection of CSS Press-able Buttons by other and going to show you one of them that is basic so you can also make an awesome button like this. It's so easy, just need to learn CSS3. We have a button code here that is actually published at DynamicDrive. Here are so many features that you can see below and we also have a live DEMO.


Features:

1.) Awesome And Stylish.
2.) Pure CSS Codes.
3.) 3D Effect After Pressing.
4.) Push Down And Push Up Effect With CSS3.
5.) Quick To Load And Easy To Install.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Layout".
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<style>
a.css3dbutton {
background: darkred;
color: white;
text-decoration: none;
font: bold 28px Arial;
position: relative;
top: 0;
bottom: -12px;
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
display: inline-block;
padding: 10px 15px;
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}
a.css3dbutton:after {
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit;
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c;
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}
a.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
background: #bc3835;
}
a.css3dbutton:active {
top: 12px;
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
</style>
<a href="http://www.exeideas.com" class="css3dbutton">Get The Code</a>

Customization:

1.) Just Change The URL And Name.
2.) You Can Add CSS Into Your CSS File Also.
3.) Save And Done.

Don't Forget To View More Collection:

Fancy 3D-Button (Source | Demo)
Nice Structured Buttons (Source | Demo)
Large Pressable CSS Button (Source | Demo)
Brushed Metal Electric Button (Source | Demo)
3D Download Button (Source | Demo)
Play Button in CSS3 (Source | Demo)
BonBon Buttons (Source | Demo)
Animated Push Button (Source | Demo)
Clickable 3D Button (Source | Demo)
Push the Buttons (Source | Demo)
3D Button (Source | Demo)
Animated Button with CSS3 (Source | Demo)
CSS3 Push-down Button (Source | Demo)
CSS3 Colored Buttons (Source | Demo)
CSS3 Buttons With a Glass Edge (Source | Demo)
Futuristic CSS3 Buttons (Source | Demo)
Digital CSS3 Buttons (Source | Demo)
An all CSS Button (Source | Demo)
Chunky 3D CSS3 Buttons (Source | Demo)
Push it (Source | Demo)

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



4 comments :

  1. 1. Please a widget for search box for blogger with vioce recogniser
    2. My present search box only shows post when correct spelling is entered
    I want to repair it so that any body puts wrong spelling a post opens with similar spelling.....
    Help...

    ReplyDelete
    Replies
    1. We Did Not Have Voice Searcher Blogger Widget, You Have To Use Blogger Official Widget Because It Will Not Be Intrepted By You Spelling Mistake Because It Will Set It Himself...

      Delete
  2. indeed a cool thing you have done buddy,u r simply great hasan vai.

    ReplyDelete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.