Skip to content

Instantly share code, notes, and snippets.

Created June 21, 2015 00:33
Show Gist options
  • Save anonymous/5be48b40dc406ef6e6a5 to your computer and use it in GitHub Desktop.
Save anonymous/5be48b40dc406ef6e6a5 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/lobewozana
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.btn {
background: #fecc5f;
background: -webkit-gradient(linear,left top,left bottom,color-stop(#feda71,0),color-stop(#febb4a,1));
background: -webkit-linear-gradient(top, #feda71 0%, #febb4a 100%);
background: -moz-linear-gradient(top, #feda71 0%, #febb4a 100%);
background: -o-linear-gradient(top, #feda71 0%, #febb4a 100%);
background: linear-gradient(top, #feda71 0%, #febb4a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feda71', endColorstr='#febb4a',GradientType=0 );
border: 1px solid #f5b74e;
border-color: #f5b74e #e5a73e #d6982f;
-webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
-moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
padding: 0px 80px 0px 10px;
height: 38px;
display: inline-block;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
float: left;
margin: 10px;
overflow: hidden;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
text-decoration: none
}
.btn .btn-text {
padding-top: 9px;
display: block;
font-size: 18px;
white-space: nowrap;
color: #996633;
text-shadow: 0 1px 0 #fedd9b;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
font-family: Arial;
}
</style>
</head>
<body>
<a href="" class="btn">
<span class="btn-text">
Upload video
</span>
</a>
<script id="jsbin-source-css" type="text/css">.btn {
background: #fecc5f;
background: -webkit-gradient(linear,left top,left bottom,color-stop(#feda71,0),color-stop(#febb4a,1));
background: -webkit-linear-gradient(top, #feda71 0%, #febb4a 100%);
background: -moz-linear-gradient(top, #feda71 0%, #febb4a 100%);
background: -o-linear-gradient(top, #feda71 0%, #febb4a 100%);
background: linear-gradient(top, #feda71 0%, #febb4a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feda71', endColorstr='#febb4a',GradientType=0 );
border: 1px solid #f5b74e;
border-color: #f5b74e #e5a73e #d6982f;
-webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
-moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
padding: 0px 80px 0px 10px;
height: 38px;
display: inline-block;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
float: left;
margin: 10px;
overflow: hidden;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
text-decoration: none
}
.btn .btn-text {
padding-top: 9px;
display: block;
font-size: 18px;
white-space: nowrap;
color: #996633;
text-shadow: 0 1px 0 #fedd9b;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
font-family: Arial;
}</script>
</body>
</html>
.btn {
background: #fecc5f;
background: -webkit-gradient(linear,left top,left bottom,color-stop(#feda71,0),color-stop(#febb4a,1));
background: -webkit-linear-gradient(top, #feda71 0%, #febb4a 100%);
background: -moz-linear-gradient(top, #feda71 0%, #febb4a 100%);
background: -o-linear-gradient(top, #feda71 0%, #febb4a 100%);
background: linear-gradient(top, #feda71 0%, #febb4a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feda71', endColorstr='#febb4a',GradientType=0 );
border: 1px solid #f5b74e;
border-color: #f5b74e #e5a73e #d6982f;
-webkit-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
-moz-box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;
padding: 0px 80px 0px 10px;
height: 38px;
display: inline-block;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
float: left;
margin: 10px;
overflow: hidden;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
text-decoration: none
}
.btn .btn-text {
padding-top: 9px;
display: block;
font-size: 18px;
white-space: nowrap;
color: #996633;
text-shadow: 0 1px 0 #fedd9b;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
font-family: Arial;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment