2013 February 25 Archive - EXEIdeas

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. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE 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.com2.) 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 .3.) Save It, Now You Are Done. 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; } Get The Code 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)