Posts

Showing posts from September, 2013

CSS3 Animated Bubble With Demo

Image
Guyz in this tutorial I'm going to provide you the codes for  CSS3 Animated Bubble Buttons.




CODES 

CSS 
.button{ font:15px Calibri, Arial, sans-serif; /* A semi-transparent text shadow */ text-shadow:1px 1px 0 rgba(255,255,255,0.4); /* Overriding the default underline styling of the links */ text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; /* The following two rules are fallbacks, in case the browser does not support multiple backgrounds. */ background-position:bottom left; background-image:url('http://3.bp.blogspot.com/-2b7UPWj_EH0/Ukgou94oIHI/AAAAAAAABfk/WeWBXvzmiXs/s320/button_bg.png'); /* Multiple backgrounds version. The background images are defined individually in color classes */ background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; /* Applying a default border raidus…

Add Cool and Colorful CSS 3D Buttons for Blogger, Wordpress and Websites

Image
Guyz in this Tutorial I am Going to provide you colorful 3D buttons.




CSS CODES

FOR BLUE BUTTON
/**************************************************** * Push Button Blue *****************************************************/ .push_button_blue{ position:relative; width:100px; color:#FFF; display:block; text-decoration:none; margin:0 auto; border-radius:5px; border:solid 1px #5877B8; background:#3E5C9A; text-align:center; padding:20px 30px; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s; -webkit-box-shadow: 0px 9px 0px #224285; -moz-box-shadow: 0px 9px 0px #224285; box-shadow: 0px 9px 0px #224285; } .push_button_blue:active{ -webkit-box-shadow: 0px 2px 0px #224285; -moz-box-shadow: 0px 2px 0px #224285; box-shadow: 0px 2px 0px #224285; position:relative; top:7px; }
FOR MAROON
/**************************************************** * Push Button Maroon *****************************************************/ …

Cool 3D Colored CSS Buttons to Make Website Attractive

Image
Awesome and cool 3D CSS Buttons

Guyz in this tutorial im going to provide you codes for cool and awesome CSS 3D buttons



CSS codes

body { webkit-gradient(linear, right top, left top, color-stop(0.5, rgb(48,48,48)), color-stop(0.5, rgb(240,240,240)) ); font-family: anivers; margin: 0; padding: 0; } ::selection { background:#ffffff; color:#2e2e2e; } ::-moz-selection { background:#ffffff; color:#2e2e2e; } ::-webkit-selection { background:#ffffff; color:#2e2e2e; } .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } .wrapper { max-width: 960px; margin: 0 auto; } #masthead { width: 100%; margin: 25px auto; } #headline { font-size: 72px; color: #cc3747; text-align: center; line-height: 1em; font-weight: 700; width: 80%; margin: 0 auto; display: block; } #headline .char1 { color: #64A8A6; text-shadow: rgba(74,124,123,0.85) -3px 3px 0px; } #headline .char2 { color: #CC3747; text-shadow: rgba(141,27,39,0.85) -3p…