CSS3 Gradient Button Without Images

posted in: Css | 0

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

Leave a Reply