Skip to content

Instantly share code, notes, and snippets.

@f8lrebel

f8lrebel/UAH-buttons.markdown

Created March 28, 2015 20:06
Show Gist options
  • Save f8lrebel/6d309d3fa80c631d153d to your computer and use it in GitHub Desktop.
Save f8lrebel/6d309d3fa80c631d153d to your computer and use it in GitHub Desktop.
Download ZIP
UAH buttons
Raw
index.html
<h2>Standard buttons</h2>
<table border="0" cellspacing="0" cellpadding="13" style="text-align:center; width:100%;">
<tr>
<td><a class="btn" href="#">Click Here</a></td>
<td><a class="btn btn-gray" href="#">Click Here</a></td>
<td><a class="btn btn-dkblue" href="#">Click Here</a> </td>
<td><a class="btn btn-ltblue" href="#">Click Here</a></td>
<td><a class="btn btn-black" href="#">Click Here</a></td>
</tr>
<tr>
<td>btn</td>
<td>btn btn-gray</td>
<td>btn btn-dkblue</td>
<td>btn btn-ltblue</td>
<td>btn btn-black</td>
</tr>
</table>
<h2>Small buttons</h2>
<table border="0" cellspacing="0" cellpadding="14" style="text-align:center; width:100%;">
<tr>
<td><a class="btn btn-small" href="#">Click Here</a></td>
<td><a class="btn btn-small btn-gray" href="#">Click Here</a></td>
<td><a class="btn btn-small btn-dkblue" href="#">Click Here</a> </td>
<td><a class="btn btn-small btn-ltblue" href="#">Click Here</a></td>
<td><a class="btn btn-small btn-black" href="#">Click Here</a></td>
</tr>
<tr>
<td>btn btn-small</td>
<td>btn btn-small btn-gray</td>
<td>btn btn-small btn-dkblue</td>
<td>btn btn-small btn-ltblue</td>
<td>btn btn-small btn-black</td>
</tr>
</table>
<h2>Large buttons</h2>
<table border="0" cellspacing="0" cellpadding="14" style="text-align:center; width:100%;">
<tr>
<td><a class="btn btn-large" href="#">Click Here</a></td>
<td><a class="btn btn-large btn-gray" href="#">Click Here</a></td>
<td><a class="btn btn-large btn-dkblue" href="#">Click Here</a> </td>
<td><a class="btn btn-large btn-ltblue" href="#">Click Here</a></td>
<td><a class="btn btn-large btn-black" href="#">Click Here</a></td>
</tr>
<tr>
<td>btn btn-large</td>
<td>btn btn-large btn-gray</td>
<td>btn btn-large btn-dkblue</td>
<td>btn btn-large btn-ltblue</td>
<td>btn btn-large btn-black</td>
</tr>
</table>
<h2>Block buttons</h2>
<p style="text-align:center;">
<a class="btn btn-block" href="#">Click Here</a><br />btn btn-block<br /><br />
<a class="btn btn-block btn-gray" href="#">Click Here</a><br />btn btn-block btn-gray<br /><br />
<a class="btn btn-block btn-dkblue" href="#">Click Here</a><br />btn btn-block btn-gray<br /><br />
<a class="btn btn-block btn-ltblue" href="#">Click Here</a><br />btn btn-block btn-gray<br /><br />
<a class="btn btn-block btn-black" href="#">Click Here</a><br />btn btn-block btn-gray<br /><br />
</p>
Raw
style.css
body {
font-family: Helvetica, Arial, sans-serif;
}
/* -------------------------------------------- BUTTONS -------------*/
body .btn {
display: inline-block;
padding: 6px 14px 6px;
margin-bottom: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #FFFFFF;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-decoration: none;
vertical-align: middle;
cursor: pointer;
background-color: #0077C8;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 95%);
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 95%);
background-image: -linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 95%);
background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.05) 95%);
background-repeat: repeat-x;
border: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
transition: 0.1s;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
body .btn:hover {
background-color: #0098ff;
-webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -4px 0 rgba(0,0,0,.2);
box-shadow: inset 0 -4px 0 rgba(0,0,0,.2);
margin-top: -2px;
padding: 6px 14px 8px;
}
body .btn:active {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-top: 2px;
padding: 6px 14px 4px;
}
body .btn-gray { color:#000000; background-color: #F5F5F5; }
body .btn-gray:hover { background-color:#DDDDDD; }
body .btn-dkblue { background-color: #054375; }
body .btn-dkblue:hover { background-color:#0066b8; }
body .btn-ltblue { background-color: #00a4d8; }
body .btn-ltblue:hover { background-color:#01c2ff; }
body .btn-black { background-color: #222222; }
body .btn-black:hover { background-color:#444444; }
body .btn-large {
padding: 8px 28px;
font-size: 20px;
line-height: 30px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
}
body .btn-large:hover {
-webkit-box-shadow: inset 0 -6px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -6px 0 rgba(0,0,0,.2);
box-shadow: inset 0 -6px 0 rgba(0,0,0,.2);
margin-top: -4px;
padding: 8px 28px 12px;
}
body .btn-large:active {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-top: 3px;
padding: 8px 28px 5px;
}
body .btn-small {
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
padding: 0 8px;
margin-top: -5px;
margin-bottom:-4px;
}
body .btn-small:hover {
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
padding: 0 8px 2px;
margin-top: -7px;
}
body .btn-small:active {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 0 8px 0px;
margin-top: -5px;
}
body .btn-block {
padding: 8px 28px;
font-size: 20px;
line-height: 30px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
width:100%;
max-width:960px
}
body .btn-block:hover {
-webkit-box-shadow: inset 0 -6px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -6px 0 rgba(0,0,0,.2);
box-shadow: inset 0 -6px 0 rgba(0,0,0,.2);
margin-top: -4px;
padding: 8px 28px 12px;
}
body .btn-block:active {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-top: 3px;
padding: 8px 28px 5px;
}
Raw
UAH-buttons.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment