input box css

-
Forms are an essential part of interaction on the Internet but they can look rather drab.modify the inputbox in my new module of css:



A simple input style property with css2:
CSS:
input .submit
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}



.button {
    border: none;
    background: url('buttnbg.png') no-repeat top left;
    padding: 2px 8px;
}
.button:hover {
    border: none;
    background: url('buttnbg') no-repeat bottom left;
    padding: 2px 8px;
}

HTML:
  ‹ input type="submit" value="go!" class="submit" /›

CSS3 button style: It's a simple button we can create with transparent PNG  gradient background, border, border-radius, box-shadow, and text-shadow.

    .buttoncss3{
    background: #222 url(buttonbg.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    position: relative;
    cursor: pointer;
    }


The CSS3 property included 
  1. moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  2. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  3. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  4. border-bottom: 1px solid rgba(0,0,0,0.25); 



 We can also include gradient color with CSS3:

.button{
 color: #fef4e9;
 border: solid 1px #da7c0c;
 background: #f78d1d;
 background: -webkit-gradient(linear, left top, left bottom, 
from(#faa51a), to(#f47a20));
 background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
 filter:  progid:DXImageTransform.Microsoft.
gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button:hover
 {
 background: #f47c20;
 background: -webkit-gradient(linear, left top, left bottom, 
from(#f88e11), to(#f06015));
 background: -moz-linear-gradient(top,  #f88e11,  #f06015);
 filter:  progid:DXImageTransform.Microsoft.
gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
 
CSS# Gradient: background: #0060df;
background: -moz-linear-gradient(-90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
 background: -webkit-gradient(linear, left top, left bottom, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3944a8', endColorstr='#78e2ff', GradientType=0 );
Example2:
.button2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #FFF;
    padding: 5px 10px 5px 10px;
    border: solid 1px #CCC;
    background: #ba4742;
    text-shadow: 0px 1px 0px #000;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 1px 3px #111;
    -moz-box-shadow: 3px 3px 1px #999;
    -webkit-box-shadow: 3px 3px 1px #999;
    cursor: pointer;
}
.button2:hover {
    background: #a33f3a;
}
Example3:
.button3 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #FFF;
    padding: 5px 10px 5px 10px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #000;
    text-decoration: none;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    background: #0060df;
    background: -moz-linear-gradient(-90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3944a8', endColorstr='#78e2ff', GradientType=0 );
    cursor: pointer;
}
.button3:hover {
    background: -moz-linear-gradient(90deg, #9299d0 5%, #6f78c1 15%, #3944a8 35%, #138aef 75%, #78e2ff 100%, #fff);
    background: -webkit-gradient(linear, left bottom, left top, from(#9299d0), to(#78e2ff), color-stop(0.2, #6f78c1), color-stop(0.5, #3944a8), color-stop(.7, #138aef), color-stop(0.9, #78e2ff));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78e2ff', endColorstr='#3944a8', GradientType=0 );
}
Example4:
.button4 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #000;
    padding: 5px 10px 5px 10px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #FFF;
    text-decoration: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: #ffcc66;
    background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffbc47 51%, #ffc75d 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #ffbc47), color-stop(0.9, #ffc75d));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc66', endColorstr='#ffe6b6', GradientType=0 );
    cursor: pointer;
}
.button4:hover {
    background: -moz-linear-gradient(top, #ffcc66 0%, #ffe6b6 50%, #ffe6b6 51%, #ffc75d 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffe6b6), color-stop(0.4, #ffe6b6), color-stop(0.5, #fff), color-stop(.5, #fff), color-stop(0.9, #ffc75d));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6b6', endColorstr='#ffe6b6', GradientType=0 );
}
 
Example5:
.button5 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #FFF;
    padding: 5px 50px 5px 50px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #666;
    text-decoration: none;
    -moz-box-shadow: 0 1px 3px #111;
    -webkit-box-shadow: 0 1px 3px #111;
    box-shadow: 0 1px 3px #111;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #64a724;
    background: -moz-linear-gradient(top, #64a724 0%, #579727 50%, #58982a 51%, #498c25 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#64a724), to(#498c25), color-stop(0.4, #579727), color-stop(0.5, #58982a), color-stop(.9, #498c25), color-stop(0.9, #498c25));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a724', endColorstr='#498c25', GradientType=0 );
    cursor: pointer;
}
.button5:hover {
    border: 1px solid #FFF;
}
 
 
Example6:
 
.button6 {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 22px;
    color: #443333;
    padding: 5px 50px 5px 50px;
    border: 1px solid #999;
    text-shadow: 0px 1px 1px #CCC;
    text-decoration: none;
    -moz-box-shadow: 0 1px 3px #111;
    -webkit-box-shadow: 0 1px 3px #111;
    box-shadow: 0 1px 3px #111;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #696969;
    background: -moz-linear-gradient(top, #d1d1d1 10%, #7b7b7b 60%, #696969 80%, #696969 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#d1d1d1), to(#7b7b7b), color-stop(0.4, #d1d1d1), color-stop(0.8, #7b7b7b), color-stop(.9, #696969), color-stop(0.9, #696969));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#7b7b7b', GradientType=0 );
    cursor: pointer;
}
.button6:hover {
    color: #000;
}
 
Example7 input field style:
 
input{  
        padding: 5px;  
        font-size: 15px;  
        text-shadow: 0px 1px 0px #fff;  
        outline: none;  
        background: -webkit-gradient(linear, left top, left bottombottom,
 from(#bcbcbe), to(#ffffff));  
        background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);  
    }   
input:focus {  
        -webkit-box-shadow: 0px 0px 5px #007eff;  
        -moz-box-shadow: 0px 0px 5px #007eff;  
        box-shadow: 0px 0px 5px #007eff;  
    }  
How to Use above example in your page? 
First, copy the .button style and paste css page (external on internal 
area-in header between style tag).
and in HTML element where you want the button to be 
(eg.  "submit" name="submit1" value="Submit" class="button" />). 
You can call CSS classes to any element such as link, p, span, div, 
input, button, etc.
 
Note: CSS3 button works  following browsers.
  1. Mozilla Firefox – 3.6.14 : Excellent
  2. Google Chrome – 9.0 : Excellent
  3. Safari – 5.0.3 : Excellent
  4. Opera 11.01 : Good
  5. Internet Explorer 8 : Poor
You can modify these examples to create unlimited text and box shadow, 
linear gradient and radius effects.

Comments

Post a Comment

Popular posts from this blog

Best jQuery Chart Libraries

-
In this article we listed best chart libraries that you can use in your projects. Most of them are free for personal and commercial use.   Jquery GraphUp Plugin “GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.” and only 4kB.   Demo . jQuery Highcharts Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle. Demo jqPlot jqPlot is a plotting and charting plugin for the jQuery. jqPlot produce...
Read more

jQuery/CSS multi level dropdown menu

-
Drop-down menus and menu bars have been heavily used in many larger sites to make it easier for visitors to find what they are looking for. Here you’ll find jquery and CSS based drop-down . Simple jQuery Dropdowns Very stripped down code and minimal styling and has all the functionality typically needed and it works in all major browsers even in IE6. Superfish on ‘roids Superfish is one of the most popular Drop-Down menus available. Superfish on ‘roids takes it to the next level with jQuery! Smooth Navigational Menu Multi-level CSS and jQuery for smooth navigation. Mega Drop Down Menus Create a Mega Drop-down menu perfect for eCommerce websites. Vimeo-like top navigation Create a Vimeo-like top naviation. It offers you different search options that you can choose and narrow your search. Animated Drop Down Menu with jQuery Drop down menus are a really convent way to fit a large menu into a really small initial space. For a long time people have just used...
Read more