Apna Hai - W3 HTML CSS Courses Tutorials: 3D

Results for 3D

3D button website or Blogger with html and CSS

W3 HTML CSS Courses Tutorials July 05, 2022

Website buttons is a very important component in internet style, with slight modifications using CSS3 you’ll get a really nice button look. there ar such a lot of results which will be obtained by exploitation CSS3 like rounded corner effect, hover result, pressed result, etc.

If you’re a complicated Photoshop user, you'll use PSD file and modify them to suit your desires. Don’t worry, there ar plenty of free PSD files out there. In today’s post we’ve compiled helpful download Buttons in HTML/CSS and PSD, all of them ar well-designed and codes ar simple to implement in CSS

html

CSS

body {     font-family: Impact; } .button {     height: 80px;     width: 200px;     cursor: pointer;     margin: 50px auto; } .button .outer {     position: relative;     width: 100%;     height: 100%;     padding: 10px;     background: rgba(0,0,0,0.65);     border-radius: 14px;     -webkit-border-radius: 14px;     -moz-border-radius: 14px;     box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;     -webkit-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;     -moz-box-shadow: inset rgba(0,0,0,0.85) 0px 1px 5px;     -webkit-transform: perspective(500px) rotateX(35deg);     -moz-transform: perspective(500px) rotateX(35deg); } .button .outer .height {     position: relative;     height: 100%;     margin-top: -15px;     padding-bottom: 15px;     background: #39a02d;     border-radius: 16px;     -webkit-border-radius: 16px;     -moz-border-radius: 16px;     box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;     -webkit-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;     -moz-box-shadow: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 8px;     -webkit-transition: all 0.1s ease-in-out;     -moz-transition: all 0.1s ease-in-out; }       .button:hover .outer .height {     margin-top: -10px;     padding-bottom: 10px;     background: #3aaf2d;     box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;     -webkit-box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;     -moz-box-shadow: rgba( 0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px; } .button:active .outer .height {     margin-top: 0px;     padding-bottom: 0px; } .button .outer .height .inner {     line-height: 2.8em;     font-size: 30px;     letter-spacing: .05em;     position: relative;     height: 100%;     text-align: center;     text-shadow: #8aff7b 0px 0px 1px;     background: #44d135;     background: -moz-linear-gradient(top, #80ec75 0%, #43d034 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80ec75), color-stop(100%,#43d034)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #80ec75 0%,#43d034 100%); /* Chrome10+,Safari5.1+ */     background: linear-gradient(top, #80ec75 0%,#43d034 100%); /* W3C */     border-radius: 12px;     -webkit-border-radius: 12px;     -moz-border-radius: 12px;     box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;     -webkit-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;     -moz-box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;     -webkit-transition: all 0.1s ease-in-out;     -moz-transition: all 0.1s ease-in-out; } .button:hover .outer .height .inner{     text-shadow: #99f48d 0px 0px 1px;     background: #43d034; /* Old browsers */     background: -moz-linear-gradient(top, #43d034 0%, #67e45c 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43d034), color-stop(100%,#67e45c)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #43d034 0%,#67e45c 100%); /* Chrome10+,Safari5.1+ */     background: linear-gradient(top, #43d034 0%,#67e45c 100%); /* W3C */ } .button:active .outer .height .inner{     text-shadow: #319926 0px 1px 0px;     border-radius: 16px;     -webkit-border-radius: 16px;     -moz-border-radius: 16px;     box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;     -webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;     -moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;     background: #1d7d12; /* Old browsers */     background: -moz-linear-gradient(top, #1d7d12 0%, #4fd342 100%); /* FF3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d7d12), color-stop(100%,#4fd342)); /* Chrome,Safari4+ */     background: -webkit-linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* Chrome10+,Safari5.1+ */     background: linear-gradient(top, #1d7d12 0%,#4fd342 100%); /* W3C */ }

CSS Buttons 16 Best Stylish Button

W3 HTML CSS Courses Tutorials December 04, 2020

CSS Buttons

Button css style example css button hover effects button css generator modern css buttons button css codepen button shadow css button animation css button, This set of stylish animated CSS buttons are ideal for use by bloggers. ... across a button from left to right (and vice versa), from top to bottom

This Code Supproted All Website and Blogger
Jast Copy And Paste Your Site

CSS Buttons

Button Colors

Button Sizes

Rounded Buttons

Colored Button Borders

<!DOCTYPE html><html><head><style>.button {   background-color: #4CAF50; /* Green */   border: none;   color: white;   padding: 15px 32px;   text-align: center;   text-decoration: none;   display: inline-block;   font-size: 16px;   margin: 4px 2px;   cursor: pointer; }  .button1 {   background-color: white;    color: black;    border: 2px solid #4CAF50; }  .button2 {   background-color: white;    color: black;    border: 2px solid #008CBA; }  .button3 {   background-color: white;    color: black;    border: 2px solid #f44336; }  .button4 {   background-color: white;   color: black;   border: 2px solid #e7e7e7; }  .button5 {   background-color: white;   color: black;   border: 2px solid #555555; } </style></head><body> <h2>Colored Button Borders</h2><p>Use the border property to add a border to the button:</p><button class="button button1">Green</button><button class="button button2">Blue</button><button class="button button3">Red</button><button class="button button4">Gray</button><button class="button button5">Black</button> </body></html>

Hoverable Buttons

<!DOCTYPE html><html><head><style>.button {   background-color: #4CAF50; /* Green */   border: none;   color: white;   padding: 16px 32px;   text-align: center;   text-decoration: none;   display: inline-block;   font-size: 16px;   margin: 4px 2px;   -webkit-transition-duration: 0.4s; /* Safari */   transition-duration: 0.4s;   cursor: pointer; }  .button1 {   background-color: white;    color: black;    border: 2px solid #4CAF50; }  .button1:hover {   background-color: #4CAF50;   color: white; }  .button2 {   background-color: white;    color: black;    border: 2px solid #008CBA; }  .button2:hover {   background-color: #008CBA;   color: white; }  .button3 {   background-color: white;    color: black;    border: 2px solid #f44336; }  .button3:hover {   background-color: #f44336;   color: white; }  .button4 {   background-color: white;   color: black;   border: 2px solid #e7e7e7; }  .button4:hover {background-color: #e7e7e7;}  .button5 {   background-color: white;   color: black;   border: 2px solid #555555; }  .button5:hover {   background-color: #555555;   color: white; } </style></head><body> <h2>Hoverable Buttons</h2><p>Use the :hover selector to change the style of the button when you move the mouse over it.</p><p><b>Tip:</b> Use the transition-duration property to determine the speed of the "hover" effect:</p><button class="button button1">Green</button><button class="button button2">Blue</button><button class="button button3">Red</button><button class="button button4">Gray</button><button class="button button5">Black</button> </body></html>

Shadow Buttons

Disabled Buttons

Button Width

Button Groups

Bordered Button Group

Vertical Button Group

Button on Image

Animated Button

Animated Buttons - Pressed Effect

Website Or Blogger Download Timer Script

W3 HTML CSS Courses Tutorials December 03, 2020

This script will help you to keep your trailer for some time

Open Your Website Or Blogger
And Create Page
So if everyone wants to download the Blogger download timer script, below you will find the, But you can easily use this script in WordPress website too. How To Use Download Timer. So below I have explained all those steps in detail, So friends Before knowing Add Download Timer in Blogger we have to know about of , If you see any tools or Widget related to online web development
And Your Content, Your Download Button Remove, And places This Script

Main feature your free countdown timer in website or Blogger to as a countdown clock. places our countdown timer: Calculation is correct - the clock displays current time, even if the user's computer clock is wrong. There are alternatives to your DST - There are several options about how to deal with the daylight saving time (DST) with your countdown timer. Read more about calculation timers and DST. Counterdown takes into account any time zone - all major time zones are supported. It is highly configurable - select different backgrounds, text options, colors and fonts. You can choose the unit to display - up to milliseconds from day to day. No registration is required - HTML code is available immediately. Use the Script to customize your own countdown timer. A small preview window should also appear beside the form at the bottom right of your web page. You can place six clock and countdown timer on a page. If two watches / timers are used, then a separate link to pageanddate.com should be provided on the page. To use the service you must add HTML to your web page and must have tags approved in IFRM. You use the service at your own risk.

Script

<center><span id="countdown"></span></center><br /><div style="text-align: center;"><b>Download Timer</b><br /><a href="#" id="download_link" style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_CoDHPzSnjIJzQEW-IlJryvZiC40XqIILs1OFn7FYajeEasNBaucBLcfNtqW2N_HfGxkt2aqu4eaDcE7wzzlOGAwybzGgizFxzX-PhQaCmLFx0zb0gJIpoJATZvM-fC48nKi91gS2rlw/s1600/but.jpg" /></a><noscript>JavaScript needs to be enabled in order to be able to download.</noscript><script type="application/javascript">(function(){    var message = "%d seconds before download link appears";    // seconds before download link becomes visible    var count = 5;    var countdown_element = document.getElementById("countdown");    var download_link = document.getElementById("download_link");    var timer = setInterval(function(){       // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed       if (count) {           // display text           countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);           // decrease counter           count--;       } else {           // stop timer           clearInterval(timer);           // hide countdown           countdown_element.style.display = "none";           // show download link           download_link.style.display = "";       }    }, 1000); })(); </script>

3D Rotating Sidebar Navigation

W3 HTML CSS Courses Tutorials December 02, 2020

3D rotary sidebar navigation

CSS3 3D Rotating Sidebar that you can implement into your website design and projects without any hesitation or any doubt. 3D ROTATING SIDEBAR NAVIGATION · CSS Sidebar Menus, Collection of hand-picked free HTML and CSS sidebar menu code ... Demo image: 3D Rotating Sidebar Navigation 3D Rotating Sidebar, 3D rotating navigation bar serves user guide in fashion. Get simple CSS ... Hovering results in the compact sidebar to spread the 3D menu, The scrolling effect is just as good. Responsive Sidebar Navigation · dashboard This is an awesome responsive solution for big

A stylish navigation bar that switches from an icon to a text with a cool animation.
Compatible Browsers: Chrome, Edge, Firefox, Opera, Safari
Dependency: -

Made with
HTML / CSS

HTML

And
Made with
HTML / CSS

CSS

*,*:before,*:after {  box-sizing: border-box; }  :after {  content: ""; }  section {   position: relative;   left: 100px; }  h1 {    margin:80px 0 10px 0;   font-size: 52px;   font-family: 'Montserrat', sans-serif;   text-transform: uppercase;   text-shadow: 1px 1px 0px #DC143C,  2px 2px 0px #DC143C,  3px 3px 0px #DC143C,  4px 4px 0px #DC143C; }  h2 {   font-size: 24px; }  body {   padding: 100px 0;  background: lightblue;   color: white;   max-width:640px;  font-family: 'Montserrat', sans-serif;  font-size: 14px;   line-height:1.4;   font-smoothing: anti-aliased; }  nav {   float: left;  position: relative;  top: 0;   left: 0;  background: transparent; }  nav ul {  text-align: center; }  nav ul li {  position: relative;   width: 70px;   cursor: pointer;  background: crimson;  text-transform: uppercase;  transition:all .4s ease-out; }  nav ul li:after {  position: absolute;  background: white;  color: crimson;  top:0;  left: 70px;  width: 70px; height: 100%;   opacity:.5;   transform: perspective(400px) rotateY(90deg);  transform-origin: 0 100%;  transition:all .4s ease-out; }  nav ul li:nth-child(1):after {   content: "Home";  line-height: 88px; } nav ul li:nth-child(2):after {   content: "About";  line-height: 88px; } nav ul li:nth-child(3):after {   content: "Work";  line-height: 85px; } nav ul li:nth-child(4):after {   content: "Say hi";  line-height: 70px; }  nav ul li:hover {  transform: translateX(-70px); }  nav ul li:hover:after {   opacity: 1;  transform: perspective(400px) rotateY(0deg) scale(1) ; }   nav ul li > div {  display: inline-block;  padding: 25px 0;  background: transparent; }  nav ul li div { position: relative; }  .roof {  width: 0;  height: 0;  top:2px;  border-style: solid;  border-width: 0 21px 15px 21px;  border-color: transparent transparent #ffffff transparent; }  .roof-edge {  position: absolute;  z-index: 20;  left: -17px;  top: 3px;  width: 0;  height: 0;  border-style: solid;  border-width: 0 17px 12px 17px;  border-color: transparent transparent crimson transparent; } /*white triangle over red triangle*/ .roof-edge:after {  position: absolute;  left: -14.5px;  top: 3px;  width: 0;  height: 0;  border-style: solid;  border-width: 0 14.5px 10px 14.5px;  border-color: transparent transparent white transparent; }  .front {  position: relative;  top: 3px;  width: 28.5px;  height: 20px;  margin: 0 auto;  background: white; } /*door*/ .front:after {  position: absolute;  background: crimson;  width: 11px;  height: 13px;  bottom: 0;  left:9px; }  /*/// About me ////*/  .head {  width: 32px;  height: 35px;  background: white;  border-radius:8px; } /*mouth*/ .head:after {  width: 4px;  height: 10px;  background: white;  position: absolute;  border-radius:4px 0 0 4px;  top:21px;  left: 14px;  transform:rotate(270deg); }  .eyes {  width: 8px;  height: 5px;  border-radius: 50%;  position: absolute;  top: 10px;  left: 5px;  background: crimson; } /*right eye*/ .eyes:after {  width: 8px;  height: 5px;  border-radius: 50%;  position: absolute;  top: 0;  left: 14px;  background: crimson; }  .beard {  width: 32px;  height: 17px;  background: crimson;  border:2px solid white;  position: absolute;  bottom: 0;  left: 0;  border-radius:0 0 8px 8px; } /*nose*/ .beard:after {  position: absolute;  top:-2px;  left: 11px;  background: white;  width:6px;  height: 4px;  border-left:1px solid crimson;  border-right:1px solid crimson; }  /*//work//*/  .paper {  position: relative;  height:32px;  width: 29px;  background: white;  border:2px solid white; }  /*window*/ .paper:after {  position: absolute;  top:1px;  left: 0;  width: 25px;  height: 29px;  background: white;  border-top:4px solid crimson; }  .lines {  position: absolute;  top: 36px;  left: 5px;  width: 11px;  box-shadow: 0 0 0 1px crimson; }  .lines:after {  position: absolute;  top: 4px;  left: 3px;  width: 14px;  box-shadow: 0 0 0 1px crimson; }  .lines:nth-child(2) {  position: absolute;  top: 44px;  left: 8px;  width: 11px; }  .lines:nth-child(2):after {  position: absolute;  top: 4px;  left: -3px;  width: 11px; }  .lines:nth-child(3) {  position: absolute;  top: 52px;  left: 8px;  width: 14px; }  .lines:nth-child(3):after {  display: none; }  /*//mail //*/  .mail-base {  position: relative;  width: 32px;  height: 18px;  background: white; }  .mail-top {  position: absolute;  z-index: 20;  left: 0;  top: 0;  width: 0;  height: 0;  transform: rotate(180deg);  border-style: solid;  border-width: 0 16px 11px 16px;  border-color: transparent transparent crimson transparent; }  .mail-top:after {  position: absolute;  z-index: 20;  left: -16px;  top: 3px;  width: 0;  height: 0;  border-style: solid;  border-width: 0 16px 9px 16px;  border-color: transparent transparent white transparent; }

Icons Tutorial - W3 html css courses

W3 HTML CSS Courses Tutorials May 20, 2019

How to Add Icon

CSS makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phone, To learn more about Bootstrap, go to our Bootstrap Tutorial, Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ... In our Flash tutorial you will learn how to start using Flash in your applications

To insert an icon, add the icon class name to an inline HTML element.
<I> and <span> elements are widely used to add icons.
All icons in the icon icons below are scalable vector icons which can be customized by CSS (size, color, shadow, etc.).

How To Add Icons

How To Creating 3D Button in HTML And CSS3 Your website or Blogger

W3 HTML CSS Courses Tutorials April 18, 2019

Creating 3D Button in HTML And CSS3

Create AN animated, three-dimensional button. to start out off, we have a tendency to care about making a fun expertise that works to its full potential within the browsers that support it, but degrades graciously within the browsers that don’t. In other words, if it isn’t totally supported, it shouldn’t look or behave as if it’s broken.

The syntax for CSS3 gradients is a small amount overwhelming at first, thus for this tutorial we’ll use a code generator to create the gradient. visit this CSS3 Gradient generator (or another one that you just realize through Google) and set 2 color stops to zero and a hundred victimisation rock bottom slider.

CSS

/* CSS Document */  /* DEMO 4 */  .a_demo_four {  background-color:#000000  font-family: 'Open Sans', sans-serif;  font-size:25px;  text-decoration:none;  color:#fff;  position:relative;  padding:14px 50px;  padding-right:50px;  background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0, rgb(44,160,202)),  color-stop(1, rgb(62,184,229))  );  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  -o-border-radius: 5px;  border-radius: 5px;  -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;  -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;  -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; }  .a_demo_four:active {  top:3px;  background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0, rgb(62,184,229)),  color-stop(1, rgb(44,160,202))  );  -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;  -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;  -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; }  .a_demo_four::before {  background-color:#2591b4;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxS1v4P0SY0mOBAzT1CoCxH8BVc-dqyGt6zcl-bZzD19pgEq9Wa7iTlSRz2AiALtsJiwnm8CCJDM8CVCu4Y7fhH1iU08kYT15wPRgE-9rHVPnBaEyKPjdd7SEsxQ6zHqvM83SuYCus4o0/s1600/right_arrow.png);  background-repeat:no-repeat;  background-position:center center;  content:"";  width:25px;  height:25px;  position:absolute;  right:15px;  top:50%;  margin-top:-9px;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -o-border-radius: 50%;  border-radius: 50%;  -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;  -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;  -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;  box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; }  .a_demo_four:active::before {  top:50%;  margin-top:-12px;  -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;  -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;  -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;  box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; }

Then use these colours to form your gradient: #609bcb and #4a85b5. the foremost common mistake new designers create with gradients is to create them too obvious. we have a tendency to simply need to feature a delicate rounded result, nothing a lot of.

html

3D Search Bar For Blogger and Website

W3 HTML CSS Courses Tutorials April 16, 2019

Stylish HTML And CSS 3D Search Box

A search box often employed by web sites to form your website user friendly. By the search box user will search the content. Adding stylish search box on your web site.This will facilitate searching data content and conjointly build a web site seem professional.

In this tutorial we tend to ar reaching to make a case for however you'll build trendy search box victimization solely HTML and CSS. Here we tend to ar demonstrate 3 sorts of trendy search box with code and demo similarly.

Create blogger page
Place This Code And Publish

Script

<div class='search-box'><style>#search-input {     float: left;     width: calc(93% - 40px);     width: -moz-calc(100% - 40px);     padding: 10px 5px 5px;     margin-top: 5px;     margin-left: 2px;     border: 1px solid rgb(153, 153, 153);     border-image-source: initial;     border-image-slice: initial;     border-image-width: initial;     border-image-outset: initial;     border-image-repeat: initial;     border-radius: 4px;     -webkit-box-shadow: rgb(204, 204, 204) 0px 5px 0px inset, rgb(152, 152, 152) 0px 6px 0px inset, rgb(223, 222, 222) 0px 11px 0px inset;     box-shadow: rgb(204, 204, 204) 0px 5px 0px inset, rgb(152, 152, 152) 0px 6px 0px inset, rgb(223, 222, 222) 0px 11px 0px inset;     font-size: 14px; } #search-input:focus, .search-button:focus {     outline: none; } .search-button {     float: left;     cursor: pointer;     padding: 4px 5px;     margin-left: 4px;     background-color: #f8b838;     color: rgba(134, 79, 11, 0.8);     text-transform: uppercase;     font-weight: bold;     border: 1px solid #99631d;     -moz-border-radius: 5px;     -webkit-border-radius: 5px;     border-radius: 5px;     text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(84, 76, 67, 0.9);     -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;     -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;     box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;     -webkit-transition: background 0.2s ease-out;     margin-top: 5px;     font-size: 14px; } .search-button:active {        background: #f6a000;        position: relative;        top: 3px;        border: 1px solid #702d00;        -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;        -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;        box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; } .sb-container{     height: 52px;     background: #f2f2f2;     padding: 0px 10px;     border: 1px solid #D6D6D6;     -moz-border-radius: 5px;     -webkit-border-radius: 5px;     border-radius: 5px;     -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede;     -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede;     box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede; } </style><div class='sb-container'>    <form action='/search' autocomplete='off' id='searchbox' method='get'>        <span><input class='search' id='search-input' name='q' placeholder='' type='text'/><input class="search-button" type="submit" value="Search"/></span>    </form></div></div><br /><br />

Subscribe to: Posts ( Atom )

3D button website or Blogger with html and CSS

CSS Buttons 16 Best Stylish Button

Website Or Blogger Download Timer Script

This script will help you to keep your trailer for some time

3D Rotating Sidebar Navigation

Icons Tutorial - W3 html css courses

How to Add Icon

How To Creating 3D Button in HTML And CSS3 Your website or Blogger

Creating 3D Button in HTML And CSS3

3D Search Bar For Blogger and Website

Labels

Popular Posts

Facebook

Blog Archive

Subscribe Us