Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Buttons

Buttons

Buttons made using HTML and LESS. Addable classes, comes in a variety of sizes and colors.

A Pen by Taeha on CodePen.

License.

<div class = "wrapper">
<div class = "center">
<div class = "button-wrap">
<button class = "rad-button light flat">Primary Light Flat</button>
</div>
<div class = "button-wrap">
<button class = "rad-button light gradient">Primary Light Graident</button>
</div>
<div class = "button-wrap">
<button class = "rad-button dark flat">Primary Dark Flat</button>
</div>
<div class = "button-wrap">
<button class = "rad-button dark gradient">Primary Dark Gradient</button>
</div>
</div>
<div class = "center">
<div class = "button-wrap">
<button class = "rad-button static light flat">Static (won't move up)</button>
</div>
<div class = "button-wrap">
<button class = "rad-button static dark flat">Static (won't move up)</button>
</div>
</div>
<div class = "center">
<div class = "button-wrap">
<button class = "rad-button static small light flat">Small</button>
</div>
<div class = "button-wrap">
<button class = "rad-button static small dark flat">Small</button>
</div>
</div>
<div class = "center">
<div class = "button-wrap">
<button class = "rad-button xsmall light flat">xSmall Light Flat</button>
</div>
<div class = "button-wrap">
<button class = "rad-button xsmall light gradient"> xSmall Light grad</button>
</div>
<div class = "button-wrap">
<button class = "rad-button xsmall dark flat">xSmall Dark Flat</button>
</div>
<div class = "button-wrap">
<button class = "rad-button xsmall dark gradient">xSmall Dark grad</button>
</div>
</div>
<div class = "center">
<div class = "button-wrap">
<button class = "rad-button warning flat">Warning</button>
</div>
<div class = "button-wrap">
<button class = "rad-button danger flat">Danger</button>
</div>
<div class = "button-wrap">
<button class = "rad-button good flat">Good</button>
</div>
<div class = "button-wrap">
<button class = "rad-button wwt flat">WWT</button>
</div>
</div>
</div><!--wrapper-->
body{
background-color:#f0f0f0;
}
.wrapper{
background-color:#FFF;
margin:50px;
padding:20px;
box-shadow:0px 0px 20px rgba(0,0,0,0.1);
}
.center{
margin-bottom: 40px;
display: flex;
justify-content: center;
height:50px;
}
.button-wrap{
margin-right: 25px;
}
.rad-button{
white-space:nowrap;
top:0px;
border-radius:4px;
position:relative;
border:none;
background:none;
font-family: 'Roboto', sans-serif;
width: 200px;
height: 50px;
cursor:pointer;
transition:0.1s all ease;
font-size : 16px;
font-weight: 300;
color:#777;
border-bottom: 1px solid #ccc;
box-shadow:0px 0px 0px 0px #B8B8B8;
&.flat{
background:#f0f0f0;
}
&.small{//flat small
width:150px;
height:35px;
&:hover{
top:-1px !important;
height:36px !important;
}
&:active{
top:0px !important;
height:35px !important;
}
}
&.xsmall{//flat xsmall
width:100px;
height:25px;
font-size:10px;
&:hover{
border-bottom: 3px solid #ccc;
top:0px;
height:25px;
}
&:active{
height:25px !important;
border-bottom: 0px !important;
}
}
&.gradient{
background: #f0f0f0; /* Old browsers */
background: -moz-linear-gradient(top, #f0f0f0 0%, #e0e0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0f0f0 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0f0f0 0%,#e0e0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0f0f0 0%,#e0e0e0 100%); /* IE10+ */
background: linear-gradient(to bottom, #f0f0f0 0%,#e0e0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
}
&.dark{
border-bottom: 1px solid #5e5e5e;
color:#f5f5f5;
&.flat{
background: #a1a1a1
}
&.gradient{
background: #a1a1a1; /* Old browsers */
background: -moz-linear-gradient(top, #a1a1a1 0%, #848484 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1a1a1), color-stop(100%,#848484)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a1a1a1 0%,#848484 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a1a1a1 0%,#848484 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a1a1a1 0%,#848484 100%); /* IE10+ */
background: linear-gradient(to bottom, #a1a1a1 0%,#848484 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1a1a1', endColorstr='#848484',GradientType=0 ); /* IE6-9 */
}
&:hover{//dark hover
background-color:#ababab;
top:-2px;
border-bottom: 4px solid #727272;
height:52px;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
&.xsmall{//dark small
border-bottom: 3px solid #727272;
top:0px;
height:25px;
}
}
&:active{//dark active
top:0px;
height:50px;
border: 1px solid #727272;
background-color:#8e8e8e;
box-shadow: inset 0px 0px 4px rgba(0,0,0,0.15);
}
}
&:focus{
outline:0;
}
&:hover{ //primary hover
background-color:#f5f5f5;
top:-2px;
height:52px;
border-bottom: 4px solid #ccc;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.15);
&.static{
top:0px;
height:50px;
}
}
&:active{//primary active
top:0px;
height:50px;
border: 1px solid #ccc;
background-color:#ededed;
box-shadow: inset 0px 0px 4px rgba(0,0,0,0.15);
}
&.warning{
background-color:#f3eac5;
color:#bd8d32;
border-bottom: 1px solid #bcb496;
&:hover{
background-color:#faf5df;
top:-2px;
border-bottom: 4px solid #bcb496;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
}
&:active{
top:0px;
border: 1px solid #bcb496;
background-color:#e6dcb5;
box-shadow: inset 0px 0px 4px rgba(0,0,0,0.25);
}
}
&.danger{
background-color:#e7a796;
color:#7b5348;
border-bottom: 1px solid #7b5348;
&:hover{
background-color:#f2beb1;
top:-2px;
border-bottom: 4px solid #7b5348;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
}
&:active{
top:0px;
border: 1px solid #7b5348;
background-color:#d69280;
box-shadow: inset 0px 0px 4px rgba(0,0,0,0.25);
}
}
&.good{
background-color:#b9e9ce;
color:#759f87;
border-bottom: 1px solid #759f87;
&:hover{
background-color:#caf3db;
top:-2px;
border-bottom: 4px solid #759f87;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
}
&:active{
top:0px;
border: 1px solid #759f87;
background-color:#a5dabc;
box-shadow: inset 0px 0px 4px rgba(0,0,0,0.25);
}
}
&.wwt{
background-color:#32699b;
color:#DBE9F5;
border-bottom: 1px solid #1A4164;
&:hover{
background-color:#427BAE ;
top:-2px;
border-bottom: 4px solid #1A4164;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
}
&:active{
top:0px;
border: 1px solid #1A4164;
background-color:#255988;
box-shadow: inset 0px 0px 4px rgba(0,0,0,0.25);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment