Skip to main content


Showing posts from September, 2013

CSS3 Animated Bubble With Demo

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


.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(''); /* 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

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


/**************************************************** * 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; }
/**************************************************** * Push Button Maroon *****************************************************/ …

Cool 3D Colored CSS Buttons to Make Website Attractive

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…