LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » CSS Codes / HTML-CSS-PHP-JavaScript » Awesome And Stylish Pure CSS 3D Pressable Button

Awesome And Stylish Pure CSS 3D Pressable Button

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.

Recommended For You:
How To Disable Copying Text From Blog And Website?

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="https://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.

Recommended For You:
Export HTML Table Data To Excel (.xls) File Using Vanilla JavaScript

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 Recipe With Your Friends Using...

4 Responses to “Awesome And Stylish Pure CSS 3D Pressable Button”

  1. Anonymous says:

    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…

    • EXEIdeas says:

      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…

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

Leave a Reply

Your email address will not be published. Required fields are marked *