Skip to content

Instantly share code, notes, and snippets.

@toadkicker

toadkicker/gist:5827724

Created June 20, 2013 23:37
Show Gist options
  • Save toadkicker/5827724 to your computer and use it in GitHub Desktop.
Save toadkicker/5827724 to your computer and use it in GitHub Desktop.
Download ZIP
I wanted a way to have an inner gradient in a button with CSS3, and started working on input type="button"
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>Fun with Buttons</title>
<style>
/*structure*/
.button, input[type="button"] {
box-shadow: .1em .2em .5em #aaa;
height: 22px;
display: block;
padding: 0 4px;
margin: 0;
border-radius: 3px;
background-clip: padding-box;
border: none;
position: relative;
text-align: left;
}
.button span.rounded-inner {
height: 50%;
width: 100%;
position: absolute;
display: inline-block;
border-radius: 2px;
top: 0;
left: 0;
}
.button span.button-text{
position: relative;
z-index: 1;
}
/*style*/
.button.orange span.rounded-inner {
background-color: #FFB900;
background-image: -webkit-gradient(linear, left top, left 50%, from(#FFB900), to(#FF8300));
background-image: -webkit-linear-gradient(50%, #FF6600, #FF8300);
background-image: -moz-linear-gradient(50%, #FF6600, #FF8300);
background-image: -o-linear-gradient(50%, #FF6600, #FF8300);
background-image: linear-gradient(to 50%, #FF6600, #FF8300);
}
.button.white span.rounded-inner {
background-color: #FFFFFF;
}
.button.blue span.rounded-inner {
background-color: #005DA5;
background-image: -webkit-gradient(linear, left top, left 50%, from(#005DA5), to(#12487A));
background-image: -webkit-linear-gradient(50%, #005DA5, #12487A);
background-image: -moz-linear-gradient(50%, #005DA5, #12487A);
background-image: -o-linear-gradient(50%, #005DA5, #12487A);
background-image: linear-gradient(to 50%, #005DA5, #12487A);
}
.button.gray span.rounded-inner {
background-color: #F1F1F1;
}
.button.orange {
background-color: #FF6600;
}
.button.white {
border: 1px solid #A7D3F5;
background-color: #F4F4F4;
}
.button.blue {
background-color: #03284F;
color: #FFF;
}
.button.gray {
background-color: #DBDBDB;
}
</style>
</head>
<body>
<div id="main">
<div id="buttons">
<h3>Using &lt;button&gt;</h3>
<button class="button orange">
<span class="button-text">Orange Button</span>
<span class="rounded-inner"></span>
</button>
<br/>
<button class="button white">
<span class="button-text">White Button</span>
<span class="rounded-inner"></span>
</button>
<br/>
<button class="button blue">
<span class="button-text">Blue Button</span>
<span class="rounded-inner"></span>
</button>
<br/>
<button class="button gray">
<span class="button-text">Gray Button</span>
<span class="rounded-inner"></span>
</button>
</div>
<div id="input">
<h3>Using &lt;input&gt;</h3>
<label>
<span class="button-text">Orange Button</span>
<input type="button" value="whatever">
</label>
<br/>
<input type="button" value="White Button">
<br/>
<input type="button" value="Blue Button">
<br/>
<input type="button" value="Gray Button">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment