You are on page 1of 7

/*button style 1*/

.buttonn{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);

text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;

background-position:bottom left;
background-image:url('button_bg.png');

background-position:bottom left, top right, 0 0, 0 0;


background-clip:border-box;

-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

-moz-box-shadow:0 0 1px #fff inset;


-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;

-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.buttonn:hover{

background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.buttonn:active{
bottom:-1px;
}

.buttonn.smalll

{ font-size:13px;}

.buttonn.roundedd{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

.bluee.buttonn{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;

background-color: #48b5f2;

background-image:

url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient(
center bottom,

circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image:

url('button_bg.png'), url('button_bg.png'),
-webkit-gradient(
radial, 50% 100%, 0, 50%

100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#4fbbf7), to(#3faeeb));
}
.bluee.buttonn:hover{
background-color:#63c7fe;
background-image:

url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient(
center bottom,

circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image:

url('button_bg.png'), url('button_bg.png'),
-webkit-gradient(
radial, 50% 100%, 0, 50%

100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#63c7fe), to(#58bef7));
}

/*button style 2*/


.button
{
text-decoration: none;
color: #fff;
font-weight: bold;
padding: 10px 20px;
font-size: 12px;
border-radius: 10px;
background-color: #666666;
box-shadow: 0 5px 5px #313131,0 9px 0 #393939, 0px 9px 10px
rgba(0,0,0,0.4),inset 0px 2px 9px rgba(255,255,255,0.2),inset 0 -2px 9px
rgba(0,0,0,0.2);
position: relative;
border-bottom: 1px solid rgba(255,255,255,0.2);
display: inline-block;
font-family: Arial,Helvetica,sans-serif;
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
}
.button:hover
{
box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px
rgba(0,0,0,0.4),inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px
rgba(0,0,0,0.2);
color: #fff!important;
}
.button:active
{
top: 7px;
box-shadow: 0 2px 0 #393939,0px 4px 4px rgba(0,0,0,0.4),inset 0px 2px
5px rgba(0,0,0,0.2);
color: #fff !important;
}

.rectangular
{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

.blue
{
background: #2a8ad8;
box-shadow: 0 5px 5px #364a8e,0 9px 0 #25325e,0px 9px 10px
rgba(0,0,0,0.4),inset 0px 2px 9px rgba(255,255,255,0.2),inset 0 -2px 9px
rgba(0,0,0,0.2);
}
.blue:hover

{
box-shadow: 0 5px 5px #364a8e,0 9px 0 #25325e,0px 9px 10px
rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4),inset 0 -2px 9px
rgba(0,0,0,0.2);
}
.blue:active
{
box-shadow: 0 2px 0 #25325e,0px 4px 4px rgba(0,0,0,0.3),inset 0px 2px
5px rgba(0,0,0,0.2);
}

/*button style 3*/

.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,
#154682), color-stop(1, #0061a7));
background:-moz-linear-gradient(top, #154682 5%, #0061a7 100%);
background:-webkit-linear-gradient(top, #154682 5%, #0061a7 100%);
background:-o-linear-gradient(top, #154682 5%, #0061a7 100%);
background:-ms-linear-gradient(top, #154682 5%, #0061a7 100%);
background:linear-gradient(to bottom, #154682 5%, #0061a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#154682',
endColorstr='#0061a7',GradientType=0);
background-color:#154682;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #124d77;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,
#0061a7), color-stop(1, #154682));
background:-moz-linear-gradient(top, #0061a7 5%, #154682 100%);
background:-webkit-linear-gradient(top, #0061a7 5%, #154682 100%);
background:-o-linear-gradient(top, #0061a7 5%, #154682 100%);
background:-ms-linear-gradient(top, #0061a7 5%, #154682 100%);
background:linear-gradient(to bottom, #0061a7 5%, #154682 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7',
endColorstr='#154682',GradientType=0);
background-color:#0061a7;
}
.myButton:active {
position:relative;
top:1px;
}
/*button style 4*/
.myButton1 {
-moz-box-shadow: 0px 10px 6px -6px #276873;
-webkit-box-shadow: 0px 10px 6px -6px #276873;
box-shadow: 0px 10px 6px -6px #276873;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,
#599bb3), color-stop(1, #408c99));
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
background-color:#599bb3;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:18px;
font-weight:bold;
padding:10px 28px;
text-decoration:none;
text-shadow:0px 1px 0px #3d768a;
}
.myButton1:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,
#408c99), color-stop(1, #599bb3));
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);

background-color:#408c99;
}
.myButton1:active {
position:relative;
top:1px;
}
/*text box style 1*/

.box
{
background:white;
border:1px solid #ddd;
border-radius:5px;
box-shadow:0 0 5px #333;
color:#666;
float:left;
padding:5px 10px;
width:165px;
outline:none;
}
input.box:focus
{
border-color:#ffa84c;
}

/*..................................................................................*/

Date:17/08/2013
Day:Saturday
/*drop box style 1*/
.dropbox
{
background:transparent;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 20px;
width: 165px;
box-shadow:0 0 3px #333;
border-radius:6px;
background:#C0C0C0 ;
color:black;
/*background: rgb(89, 155, 179);
color:white;*/
border:1px solid #ddd;
outline:none;
height:23px;
/*background:url('images.jpg') no-repeat scroll right center rgb(89, 155, 179);*/
}

/*.dropbox1
{
width:165px;
border-radius: 5px;
height:15px;
background-color:#154682;
}*/
/*drop box style 2*/
.dropbox1
{
font-family: Arial;
font-size: 12px;
border:1px solid #ddd;
text-decoration: none;
box-shadow:0 0 3px #333;
border-radius:5px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0 ), to(#A0A0A0 ));
background: -moz-linear-gradient(top, #F0F0F0 , #A0A0A0 );
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F0F0F0,
endColorStr=#A0A0A0);
outline:none;
/*
background: -webkit-gradient(linear, 0 0, 0 100%, from(#3fdefa),
to(#003194));
background: -moz-linear-gradient(top, #3fdefa, #003194);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fdefa,
endColorStr=#003194);*/
text-align:center;
height:23px;
width:165px;
}

You might also like