CSS3 Gradient Button Without Images

| posted in: Css | 1

Summary:

Try this pasting in your HTML editor and see the result.

<!DOCTYPE HTML>

<html>

<head>

<title>Untitled Document</title>

<style type=”text/css”>

.button {

display: inline-block;

outline: none;

cursor: pointer;

text-align: center;

text-decoration: none;

font: 14px/100% Arial, Helvetica, sans-serif;

padding: .5em 2em .55em;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.button:hover {

text-decoration: none;

}

.button:active {

position: relative;

top: 1px;

}

.orange {

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′);

}

.orange: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′);

}

.orange:active {

color: #fcd3a5;

background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));

background: -moz-linear-gradient(top, #f47a20, #faa51a);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#f47a20′, endColorstr=’#faa51a’);

}
</style>

</head>

<body>

<div style=”width:100px;”>Collabor</div>

<input type=”button” class=”button orange” name=”Collabor” value=”collabor”/>

</body>

</html>

Previous Post

One Response

  1. El 63% de las empresas agroalimentarias redujo su plantilla el último año debido al efecto de las marcas blancas en el sector, que, según el secretario general de la Federación Agroalimentaria de CCOO, Jesús Villar, generan &#1&s0;peore22#8228; condiciones económicas que las marcas tradicionales.

Leave a Reply