For past few months I was working on a project and got to learn lots of new things. I would love to share some good learnings like Create 'CSS3 Gradient Buttons'.
The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.
CSS:
<style media="all" type="text/css">
.btn {
overflow: hidden;
zoom:1;
}
.btn input.secondary,
.btn button.secondary {
background: #3c78c7;
background: -moz-linear-gradient(top, #4b97fa 0%, #3c78c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b97fa), color-stop(100%,#3c78c7));
background: -webkit-linear-gradient(top, #4b97fa 0%,#3c78c7 100%);
background: -o-linear-gradient(top, #4b97fa 0%,#3c78c7 100%);
background: -ms-linear-gradient(top, #4b97fa 0%,#3c78c7 100%);
background: linear-gradient(top, #4b97fa 0%,#3c78c7 100%);
color: #fff;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
background: #4b97fa;
background: -moz-linear-gradient(top, #88bcff 0%, #4b97fa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bcff), color-stop(100%,#4b97fa));
background: -webkit-linear-gradient(top, #88bcff 0%,#4b97fa 100%);
background: -o-linear-gradient(top, #88bcff 0%,#4b97fa 100%);
background: -ms-linear-gradient(top, #88bcff 0%,#4b97fa 100%);
background: linear-gradient(top, #88bcff 0%,#4b97fa 100%);
}
.btn input.secondary:active,
.btn button.secondary:active {
outline:0;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
}
/* #### MAIN BUTTON STYLES #### */
.btn input,
.btn button {
font-size: 18px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* input + button styles*/
.btn input,
.btn button {
border: none;
padding: 0;
margin: 0;
padding: 3px 10px 4px;
cursor: pointer;
white-space: normal;
box-shadow: none;
transition: none 0s ease 0s;
text-align: left;
-webkit-appearance: button;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Google Chrome and Safari adjustments */
.btn input,
.btn button {
height: 22px;
padding-bottom: 1px;
line-height: 1.428571; /* 20/14 */
}
}
</style>
<!--[if IE]>
<style media="all" type="text/css">
.btn input,
.btn button {
overflow: visible;
font-size: 18px;
}
.btn input.secondary,
.btn button.secondary {
background: #3c78c7;
color: #fff;
overflow: visible;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
background: #4b97fa;
}
</style>
<![endif]-->
HTML:
<div class="btn action"><input type="submit" value="Submit" class="secondary"></div>
The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.
CSS:
<style media="all" type="text/css">
.btn {
overflow: hidden;
zoom:1;
}
.btn input.secondary,
.btn button.secondary {
background: #3c78c7;
background: -moz-linear-gradient(top, #4b97fa 0%, #3c78c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b97fa), color-stop(100%,#3c78c7));
background: -webkit-linear-gradient(top, #4b97fa 0%,#3c78c7 100%);
background: -o-linear-gradient(top, #4b97fa 0%,#3c78c7 100%);
background: -ms-linear-gradient(top, #4b97fa 0%,#3c78c7 100%);
background: linear-gradient(top, #4b97fa 0%,#3c78c7 100%);
color: #fff;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
background: #4b97fa;
background: -moz-linear-gradient(top, #88bcff 0%, #4b97fa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bcff), color-stop(100%,#4b97fa));
background: -webkit-linear-gradient(top, #88bcff 0%,#4b97fa 100%);
background: -o-linear-gradient(top, #88bcff 0%,#4b97fa 100%);
background: -ms-linear-gradient(top, #88bcff 0%,#4b97fa 100%);
background: linear-gradient(top, #88bcff 0%,#4b97fa 100%);
}
.btn input.secondary:active,
.btn button.secondary:active {
outline:0;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
}
/* #### MAIN BUTTON STYLES #### */
.btn input,
.btn button {
font-size: 18px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* input + button styles*/
.btn input,
.btn button {
border: none;
padding: 0;
margin: 0;
padding: 3px 10px 4px;
cursor: pointer;
white-space: normal;
box-shadow: none;
transition: none 0s ease 0s;
text-align: left;
-webkit-appearance: button;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Google Chrome and Safari adjustments */
.btn input,
.btn button {
height: 22px;
padding-bottom: 1px;
line-height: 1.428571; /* 20/14 */
}
}
</style>
<!--[if IE]>
<style media="all" type="text/css">
.btn input,
.btn button {
overflow: visible;
font-size: 18px;
}
.btn input.secondary,
.btn button.secondary {
background: #3c78c7;
color: #fff;
overflow: visible;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
background: #4b97fa;
}
</style>
<![endif]-->
HTML:
<div class="btn action"><input type="submit" value="Submit" class="secondary"></div>
No comments: