Sponsored Link
In this article, I will show you 90 beautiful button examples along with HTML/CSS recipes. All of them have minimal hover or active effects. None of them do not use javascript or images. You can copy and paste right into your projects. No attribution required.
HTML/CSS are hidden by default. By clicking buttons you are interested in, HTML/CSS recipes show up below those button.
1. 3D Style with Acctive Effects
These buttons looks like raised up from the background by dark bottom border. On active, the border disappears and looks “pressed”. If you want to give them more realistic, it would be a good idea to make use of Emoboss Effect by text-shadow.
Push button
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*Button Color*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.square_btn:active {/*on Click*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*Move down*/
border-bottom: none;/*disappears*/
}
with box-shadow
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ButtonColor*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.square_btn:active {/*OnClick*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*Move down*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*Reduce Shadow*/
border-bottom: none;
}
with Emboss Text
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*Button Color*/
color: #4868ad;/*Use Darker Color*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #627295;
border-radius: 3px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.square_btn:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}with Raised text
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*Button Color*/
color: #668ad8;/*Same as background*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #627295;
border-radius: 3px;
font-weight: bold;
text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
.square_btn:active{/*on Click*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
Viewed obliquely
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
position: relative;
padding: 0.5em 1.4em;
text-decoration: none;
background: #668ad8;/*Button Color*/
color: #FFF;
border-bottom: solid 5px #36528c;/*daker than background*/
border-right: solid 5px #5375bd;/*darker than background*/
}
.square_btn:before{
content: " ";
position: absolute;
bottom: -5px;
left: -1px;
width: 0;
height: 0;
border-width: 0 6px 6px 0px;
border-style: solid;
border-color: transparent;
border-bottom-color: #FFF;
}
.square_btn:after{
content: " ";
position: absolute;
top: -1px;
right: -5px;
width: 0;
height: 0;
border-width: 0px 6px 6px 0px;
border-style: solid;
border-color: #FFF;
border-bottom-color: transparent;
}
.square_btn:active{ /*on click*/
border:none;
-ms-transform: translate(6px,6px);
-webkit-transform: translate(6px,6px);
transform: translate(6px,6px);/*move LowerRight*/
}
.square_btn:active:after,
.square_btn:active:before {/*on click*/
content: none;/*Border disappears*/
}
Upper view
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
position: relative;
padding: 0.35em 1em;
background: #668ad8;/*Button Color*/
color: #FFF;
text-decoration: none;
}
.square_btn:before{
content: "";
position: absolute;
top: -16px;
left: 0;
width: -webkit-calc(100% - 16px);
width: calc(100% - 16px);
height: 0;
border: solid 8px transparent;
border-bottom-color: #8eacec;/*brighter than button color*/
}
.square_btn:active{/*On Click*/
padding: 0.32em 0.9em;
-ms-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.square_btn:active:before{
width: -webkit-calc(100% - 12px);
width: calc(100% - 12px);
}
.square_btn:active:before{
top:-12px;
border-width: 6px;
}
Minimal button
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #fd9535;/*button color*/
border-bottom: solid 2px #d27d00;/*daker color*/
border-radius: 4px;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
font-weight: bold;
}
.square_btn:active {
border-bottom: solid 2px #fd9535;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
Charming style
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #fd9535;
border-radius: 4px;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #d27d00;
}
.square_btn:active {/*on Click*/
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
LEGO like style
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
background: #00BCD4;
color: #00BCD4;
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2);
border-bottom: solid 2px #118e9e;
border-radius: 4px;
font-weight: bold;
text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
.square_btn:active {
border-bottom: solid 2px #00BCD4;
box-shadow: none;
text-shadow: -1px -1px rgba(255, 255, 255, 0.3), 1px 1px rgba(0, 0, 0, 0.3);
}
Simple
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #03A9F4;
border: solid 1px #0f9ada;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.square_btn:active {/*onClick*/
border: solid 1px #03A9F4;
box-shadow: none;
text-shadow: none;
}
Soft touch button
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
position: relative;
text-decoration: none;
color: #f9a9ae;
width: 120px;
height: 50px;
line-height: 50px;
border-radius: 5px;
text-align: center;
vertical-align: middle;
overflow: hidden;
font-weight: bold;
background-image: -webkit-linear-gradient(#fed6e3 0%, #ffaaaa 100%);
background-image: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
.btn:active{/*on click*/
-ms-transform: translateY(2px);
-webkit-transform: translateY(2px);
transform: translateY(2px);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
background-image: -webkit-linear-gradient(#fed6e3 0%, #ffbcbc 100%);
background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);
}
3D Text button
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
text-decoration: none;
font-weight: bold;
font-size: 37px;
color: #799dec;
text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
}
.square_btn:active {
top: 4px;
box-shadow: none;
}
Sticky note
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #f7f7f7;
border-left: solid 6px #ff7c5c;
color: #ff7c5c;
font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.square_btn:active {
box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
transform: translateY(2px);
}
Realistic looking button
HTML
<a href="#" class="btn">
<i class="fa fa-power-off"></i>
</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
color: rgba(152, 152, 152, 0.43);/*IconColor*/
width: 80px;
height: 80px;
line-height: 80px;
font-size: 40px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
font-weight: bold;
background-image: -webkit-linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
border-bottom: solid 2px #b5b5b5;
}
.btn .fa {
line-height: 80px;
}
.btn:active {/*onClick*/
background-image: -webkit-linear-gradient(#efefef 0%, #d6d6d6 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
border-bottom: none;
}
The icon is from FontAwesome.
with Colorful icon
HTML
<a href="#" class="btn">
<i class="fa fa-home"></i>
</a>
CSS
.btn{/*dent around button*/
display: inline-block;
position: relative;
text-decoration: none;
color: rgba(3, 169, 244, 0.54);
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
background: #f7f7f7;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
}
.btn .fa {/*Button itself*/
position: absolute;
content: '';
width: 80px;
height: 80px;
line-height: 80px;
vertical-align: middle;
left: 10px;
top: 9px;
border-radius: 50%;
font-size: 40px;
background-image: -webkit-linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
border-bottom: solid 2px #b5b5b5;
}
.btn .fa:active{
background-image: -webkit-linear-gradient(#efefef 0%, #d6d6d6 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19);
border-bottom: solid 2px #d8d8d8;
}
2. Flat Style
Next, I will show you Flat style Buttons with fancy hover Animation. They are useful in a variety of contexts especially in flat web design.
Simple style
BUTTON
HTML
<a href="#" class="square_btn">
<i class="fa fa-caret-right"></i> BUTTON
</a>
CSS
.square_btn{
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
color: #00BCD4;
background: #ECECEC;
transition: .4s;
}
.square_btn:hover {
background: #00bcd4;
color: white;
}
“” is from FontAwesome. Needless to say, it can be deleted.(<i~>...</i>)
Simple border style
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #67c5ff;
border: solid 2px #67c5ff;
border-radius: 3px;
transition: .4s;
}
.square_btn:hover {
background: #67c5ff;
color: white;
}
Double border style
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #67c5ff;
border: double 4px #67c5ff;
border-radius: 3px;
transition: .4s;
}
.square_btn:hover {
background: #fffbef;
}
Dashed border style
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #67c5ff;
border: dashed 1px #67c5ff;
border-radius: 3px;
transition: .4s;
}
.square_btn:hover {
border-style: dotted;
color: #679efd;
}
with Pastel color background
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #67c5ff;
border: dashed 1px #67c5ff;
background: #f2fcff;
border-radius: 3px;
transition: .4s;
}
.square_btn:hover {
background: #cbedff;
color: #FFF;
}
Line on both sides
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.5em 1em;
text-decoration: none;
border-left: solid 4px #668ad8;
border-right: solid 4px #668ad8;
color: #668ad8;
background: #e1f3ff;
transition: .4s;
}
.square_btn:hover {
background: #668ad8;
color: #FFF;
}
Round cap underline
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0;
text-decoration: none;
color: #67c5ff;
}
.square_btn:before{
position: absolute;
content: '';
width: 100%;
height: 4px;
top:100%;
left: 0;
border-radius: 3px;
background:#67c5ff;
transition: .2s;
}
.square_btn:hover:before {
top: -webkit-calc(100% - 3px);
top: calc(100% - 3px);
}Double rounded cap lines
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
position: relative;
display: inline-block;
font-weight: bold;
padding: 12px 0 8px;
text-decoration: none;
color: #67c5ff;
transition: .4s;
}
.square_btn:before{
position: absolute;
content: '';
width: 100%;
height: 4px;
top:100%;
left: 0;
border-radius: 3px;
background:#67c5ff;
transition: .2s;
}
.square_btn:after{
position: absolute;
content: '';
width: 100%;
height: 4px;
top:0;
left: 0;
border-radius: 3px;
background:#67c5ff;
transition: .2s;
}
.square_btn:hover:before {
top: -webkit-calc(100% - 3px);
top: calc(100% - 3px);
}
.square_btn:hover:after {
top: 3px;
}
Round cap border on both sides
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
position: relative;
display: inline-block;
font-weight: bold;
padding: 5px 11px 5px 15px;
text-decoration: none;
color: #67c5ff;
transition: .4s;
}
.square_btn:before {
position: absolute;
display: inline-block;
content: '';
width: 4px;
height: 100%;
top: 0;
left: 0;
border-radius: 3px;
background:#67c5ff;
}
.square_btn:after{
position: absolute;
display: inline-block;
content: '';
width: 4px;
height: 100%;
top:0;
left: 100%;
border-radius: 3px;
background:#67c5ff;
}
.square_btn:hover:before,.square_btn19:hover:after{
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
Rounded corners on one side
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
color: #00BCD4;
background: #ECECEC;
border-radius: 0 15px 15px 0;
transition: .4s;
}
.square_btn:hover {
background: #636363;
}Colorful flat style
BUTTON
HTML
<a href="#" class="square_btn">
<i class="fa fa-chevron-right"></i> BUTTON
</a>
CSS
.square_btn {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #00bcd4;
transition: .4s;
}
.square_btn:hover {
background: #1ec7bb;
}
underline inside box
BUTTON
HTML
<a href="#" class="square_btn">
<span>BUTTON</span>
</a>
CSS
.square_btn {
position: relative;
display: inline-block;
font-weight: bold;
padding: 7px 10px 10px 10px;
text-decoration: none;
color: #FFF;
background: #a180dc;
transition: .4s;
}
.square_btn>span {
border-bottom: solid 2px #FFF;
}
.square_btn:hover {
background: #91b5fb;
}
Up and down lines inside box
BUTTON
HTML
<a href="#" class="square_btn">
<span>BUTTON</span>
</a>
CSS
.square_btn {
position: relative;
display: inline-block;
font-weight: bold;
padding: 1em 0.5em;
text-decoration: none;
color: #FFF;
background: #ff7f7f;
transition: .4s;
}
.square_btn>span{
border-bottom: solid 2px #FFF;
border-top: solid 2px #FFF;
}
.square_btn:hover span {
padding: 0.1em 0;
}
Tab style
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
position: relative;
display: inline-block;
font-weight: bold;
padding: 8px 10px 5px 10px;
text-decoration: none;
color: #FFA000;
background: #fff1da;
border-bottom: solid 4px #FFA000;
border-radius: 15px 15px 0 0;
transition: .4s;
}
.square_btn:hover {
background: #ffc25c;
color: #FFF;
}
Angled stripe background
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.5em 1em;
text-decoration: none;
border-left: solid 4px #668ad8;
border-right: solid 4px #668ad8;
color: #668ad8;
text-shadow: 0 0 5px white;
padding: 0.5em 1em;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
transition: .4s;
}
.square_btn:hover {
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 5px,#e9f4ff 5px, #e9f4ff 9px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 5px,#e9f4ff 5px, #e9f4ff 9px);
}
Technology design
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
position: relative;
display: inline-block;
font-weight: bold;
text-decoration: none;
color: #FFF;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.73);
padding: 0.3em 0.5em;
background: #00bcd4;
border-top: solid 3px #00a3d4;
border-bottom: solid 3px #00a3d4;
transition: .4s;
}
.square_btn:hover {
text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);
}
Stitched Style
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;
color: #FFF;
border-radius: 4px;
box-shadow: 0px 0px 0px 5px #668ad8;
border: dashed 1px #FFF;
}
.square_btn:hover{
border: dotted 1px #FFF;
}
3. Beautiful Gradient Buttons
It’s very easy to make fancy gradient buttons by using css3 linear-gradient.
45 deg blue gradient
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 3px;
font-weight: bold;
color: #FFF;
background-image: -webkit-linear-gradient(45deg, #709dff 0%, #b0c9ff 100%);
background-image: linear-gradient(45deg, #709dff 0%, #b0c9ff 100%);
transition: .4s;
}
.square_btn:hover{
background-image: -webkit-linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}
3D gradient button
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
color: rgba(0, 69, 212, 0.47);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
background-image: -webkit-linear-gradient(#6795fd 0%, #67ceff 100%);
background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #5e7fca;
}
.square_btn:active{
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
with Simple white text
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #ffffff;
background-image: -webkit-linear-gradient(#6795fd 0%, #67ceff 100%);
background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #5e7fca;
}
.square_btn:active{
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
orange gradient button
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #ffffff;
background-image: -webkit-linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #c58668;
}
.square_btn:active{
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}
Flat gradient button with rounded corners
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 7px 20px;
border-radius: 25px;
text-decoration: none;
color: #FFF;
background-image: -webkit-linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
transition: .4s;
}
.square_btn:hover {
background-image: -webkit-linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}
Flat gradient rectangle
BUTTON
HTML
<a href="#" class="square_btn">BUTTON</a>
CSS
.square_btn{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
color: #FFF;
background-image: -webkit-linear-gradient(#6795fd 0%, #67ceff 100%);
background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
transition: .4s;
}
.square_btn:hover{
background-image: -webkit-linear-gradient(#6795fd 0%, #67ceff 70%);
background-image: linear-gradient(#6795fd 0%, #67ceff 70%);
}
4. Round style
Here are 10 CSS round buttons which are cool and practical.
Simple circle
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
background: #87befd;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
transition: .4s;
}
.btn:hover{
background: #668ad8;
}Patch
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
background: #87befd;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
box-shadow: 0px 0px 0px 5px #87befd;
border: dashed 1px #FFF;
transition: .4s;
}
.btn:hover{
background: #668ad8;
box-shadow: 0px 0px 0px 5px #668ad8;
}
Solid line inside
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
background: #8cd460;
color: rgba(255, 255, 255, 0.47);
font-weight: bold;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
box-shadow: 0px 0px 0px 5px #8cd460;
border: solid 2px rgba(255, 255, 255, 0.47);
transition: .4s;
}
.btn:hover{
border-style: dashed;
}
3D circle button
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
background: #ff8181;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-weight: bold;
vertical-align: middle;
overflow: hidden;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #bd6565;
transition: .4s;
}
.btn:active{
-ms-transform: translateY(2px);
-webkit-transform: translateY(2px);
transform: translateY(2px);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
border-bottom: none;
}
with Raised Text
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
background: #ffba78;
color: #ffba78;
width: 120px;
height: 120px;
font-size: 21px;
line-height: 120px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: solid 3px #d29963;
text-shadow: -1px -1px rgba(255, 255, 255, 0.43), 1px 1px rgba(0, 0, 0, 0.49);
transition: .4s;
}
.btn:active{
-ms-transform: translateY(2px);
-webkit-transform: translateY(2px);
transform: translateY(2px);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
border-bottom: none;
}
with Emboss text
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
background: #5dc3d0;
color: rgb(82, 142, 150);
width: 122px;
font-size: 20px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
box-shadow: inset 0px 3px 0 rgba(255,255,255,0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
font-weight: bold;
border-bottom: solid 3px #549fa9;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.65);
transition: .4s;
}
.btn:active{
-ms-transform: translateY(1px);
-webkit-transform: translateY(1px);
transform: translateY(1px);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
border-bottom: none;
}
Simple lined circle
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
color: #668ad8;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
border: solid 2px #668ad8;
text-align: center;
vertical-align: middle;
overflow: hidden;
font-weight: bold;
transition: .4s;
}
.btn:hover {
background: #b3e1ff;
}
Double lined circle with spin animation on hover.
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
color: #668ad8;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
border: double 4px #668ad8;
text-align: center;
vertical-align: middle;
overflow: hidden;
transition: .6s;
}
.btn:hover{
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
Beautiful gradient circle
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn {
display: inline-block;
text-decoration: none;
color: #FFF;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
background-image: -webkit-linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
background-image: linear-gradient(45deg, #709dff 0%, #91fdb7 100%);
transition: .4s;
}
.btn:hover{
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
Soft touch
BUTTON
HTML
<a href="#" class="btn">BUTTON</a>
CSS
.btn{
display: inline-block;
text-decoration: none;
color: #f9a9ae;
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
font-weight: bold;
background-image: -webkit-linear-gradient(#fed6e3 0%, #ffaaaa 100%);
background-image: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
.btn:active{
box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.32);
background-image: -webkit-linear-gradient(#fed6e3 0%, #ffcfcf 100%);
background-image: linear-gradient(#fed6e3 0%, #ffcfcf 100%);
}
5. Social Media buttons
Here are outstading social media buttons with hover effect(spin, float, etc). All the icons below are from FontAwesome. You can easily make other social media buttons by changing color and icon code.
iPhone app icon style
Follow Me
HTML
<a href="#" class="fl_tw">
<span class="twicon"><i class="fa fa-twitter"></i></span> Follow Me
</a>
CSS
.fl_tw {
text-decoration: none;
display: inline-block;
text-align: center;
color: #1da1f3;
font-size: 25px;
text-decoration: none;
}
.fl_tw:hover {
color:#88daff;
transition: .5s;
}
.fl_tw .twicon{
border-radius: 10px;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
font-size: 35px;
line-height: 50px;
vertical-align: middle;
color: #FFF;
background: #1da1f3;
}
.fl_tw .twicon .fa {
line-height: 50px;
}
Follow Me
HTML
<a href="#" class="fl_fb">
<span class="fbicon"><i class="fa fa-facebook"></i></span> Follow Me
</a>
CSS
.fl_fb {
text-decoration: none;
display: inline-block;
text-align: center;
color: #4966a0;;
font-size: 25px;
text-decoration: none;
}
.fl_fb:hover {
color:#668ad8;
transition: .5s;
}
.fl_fb .fbicon{
border-radius: 10px;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
font-size: 35px;
line-height: 50px;
vertical-align: middle;
color: #FFF;
background: #4966a0;;
}
.fl_fb .fbicon .fa-facebook {
position: absolute;
bottom: -3px;
right: 6px;
font-size: 42px;
}
Follow Me
HTML
<a href="#" class="fl_inst">
<span class="insta"><i class="fa fa-instagram"></i></span> Follow Me
</a>
CSS
.fl_inst {
text-decoration: none;
display: inline-block;
text-align: center;
color: #2e6ca5;
font-size: 25px;
text-decoration: none;
}
.fl_inst:hover {
color:#668ad8;
transition: .5s;
}
.fl_inst .insta{
border-radius: 13px;
position: relative;
display: inline-block;
width: 50px;
height: 50px;
font-size: 35px;
line-height: 50px;
vertical-align: middle;
background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow: hidden
}
.fl_inst .insta:before{
content: '';
position: absolute;
top: 23px;
left: -18px;
width: 60px;
height: 60px;
background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
.fl_inst .fa-instagram {
color:white;
line-height: 50px;
position: relative;
z-index: 2}
Wide buttons
Follow Me
HTML
<a href="#" class="fl_tw2">
<i class="fa fa-twitter"></i> <span>Follow Me</span>
</a>
CSS
.fl_tw2{
color: #FFF
border-radius: 7px;
display: inline-block;
height: 50px;
width: 190px;
text-align: center;
font-size: 25px;
line-height: 50px;
vertical-align: middle;
background: #1da1f3;
overflow: hidden;
text-decoration:none;
}
.fl_tw2 .fa-twitter {
text-shadow: 2px 2px 0px #4287d6;
font-size: 30px;
}
.fl_tw2 span {
display:inline-block;
transition: .5s}
.fl_tw2:hover span{/*HoverEffect*/
-webkit-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
Follow Me
HTML
<a href="#" class="fl_fb2">
<i class="fa fa-facebook"></i> <span>Follow Me</span>
</a>
CSS
.fl_fb2 {
color: #FFF;
border-radius: 7px;
display: inline-block;
height: 50px;
width: 190px;
text-align: center;
font-size: 25px;
line-height: 50px;
vertical-align: middle;
background: #4966a0;
overflow: hidden;
text-decoration:none;
}
.fl_fb2 .fa-facebook {
text-shadow: 2px 2px 1px #224282;
font-size: 30px;
}
.fl_fb2 span {
display:inline-block;
transition: .5s;
}
.fl_fb2:hover span{/*HoverEffect*/
-webkit-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
Follow Me
HTML
<a href="#" class="fl_inst2">
<i class="fa fa-instagram"></i> <span>Follow Me</span>
</a>
CSS
.fl_inst2{
color: #FFF;
border-radius: 7px;
position: relative;
display: inline-block;
height: 50px;
width: 190px;
text-align: center;
font-size: 25px;
line-height: 50px;
vertical-align: middle;
background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow: hidden;
text-decoration:none;
}
.fl_inst2:before{/*gradient*/
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.fl_inst2 .fa-instagram{/*icon*/
font-size: 35px;
position: relative;
top: 4px;
}
.fl_inst2 span {
display:inline-block;
position: relative;
transition: .5s}
.fl_inst2:hover span{/*HoverEffect*/
-webkit-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
Tiny round buttons
Show Code
HTML
<!--以下twitter-->
<a href="#" class="circle_fl ftw">
<i class="fa fa-twitter"></i>
</a>
<!--以下facebook-->
<a href="#" class="circle_fl ffb">
<i class="fa fa-facebook"></i>
</a>
<!--以下pocket-->
<a href="#" class="circle_fl fpkt">
<i class="fa fa-get-pocket"></i>
</a>
<!--以下feedly-->
<a href="#" class="circle_fl ffdly">
<i class="fa fa-rss"></i>
</a>
CSS
.circle_fl{
display: inline-block;
position: relative;
box-sizing: border-box;
text-decoration: none;
color: #FFF;
width: 50px;
height: 50px;
line-height: 30px;
padding: 5px;
font-size: 25px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
font-weight: bold;
box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.25), inset 0 -2px 0px rgba(0, 0, 0, 0.18);
transition: .2s;
}
.circle_fl .fa{
line-height: 30px;
}
.circle_fl:hover{
box-shadow: none;
}
.circle_fl.ftw{
background: #1da1f3;
border: solid 5px #1da1f3;
}
.circle_fl.ffb{
background: #3b75d4;
border: solid 5px #3b75d4;
}
.circle_fl.fpkt{
background: #ef4d4d;
border: solid 5px #ef4d4d;
}
.circle_fl.ffdly{
background: #7ece46;
border: solid 5px #7ece46;
}
Flat
Show Code
HTML
<!--以下twitter-->
<a href="#" class="flat_ss">
<span class="iconback tw"><i class="fa fa-twitter"></i></span><span class="btnttl">TWEET</span>
</a>
<!--以下facebook-->
<a href="#" class="flat_ss">
<span class="iconback fb"><i class="fa fa-facebook"></i></span><span class="btnttl">SHARE</span>
</a>
<!--以下pocket-->
<a href="#" class="flat_ss">
<span class="iconback pkt"><i class="fa fa-get-pocket"></i></span><span class="btnttl">POCKET</span>
</a>
<!--以下feedly-->
<a href="#" class="flat_ss">
<span class="iconback fdly"><i class="fa fa-rss"></i></span><span class="btnttl">FEEDLY</span>
</a>
CSS
.flat_ss {
color: #484848;
display: inline-block;
height: 50px;
font-size: 25px;
line-height: 50px;
vertical-align: middle;
background: #eaeef1;
text-decoration: none;
margin: 1em;
}
.flat_ss .iconback{
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
color: white;
}
.flat_ss .iconback .fa{
font-size: 25px;
line-height: 50px;
}
.flat_ss .iconback .fa{
transition: .3s;
}
.flat_ss .btnttl{
display: inline-block;
width: 120px;
text-align: center;
vertical-align:middle;
}
.flat_ss .tw {background:#1da1f3}
.flat_ss .fb {background:#3b75d4}
.flat_ss .fdly {background:#7ece46}
.flat_ss .pkt {background:#fd7171}
.flat_ss:hover .iconback .fa{
-webkit-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
Isometric
Show Code
HTML
<!--以下twitter-->
<a href="#" class="isometric">
<span class="iconback istw"><i class="fa fa-twitter"></i></span><span class="btnttl">TWEET</span>
</a>
<!--以下facebook-->
<a href="#" class="isometric">
<span class="iconback isfb"><i class="fa fa-facebook"></i></span><span class="btnttl">SHARE</span>
</a>
<!--以下pocket-->
<a href="#" class="isometric">
<span class="iconback ispkt"><i class="fa fa-get-pocket"></i></span><span class="btnttl">POCKET</span>
</a>
<!--以下feedly-->
<a href="#" class="isometric">
<span class="iconback isfdly"><i class="fa fa-rss"></i></span><span class="btnttl">FEEDLY</span>
</a>
CSS
.isometric {
color: #484848;
display: inline-block;
height: 50px;
font-size: 25px;
line-height: 46px;
background: #eaeef1;
text-decoration: none;
box-sizing: border-box;
margin: 1em;
}
.isometric .iconback{
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
color: white;
vertical-align: middle;
}
.isometric span{
vertical-align: middle;
}
.isometric .iconback .fa{
line-height: 46px;
font-size:25px;
}
.isometric .btnttl{
display: inline-block;
width: 120px;
height: 50px;
text-align: center;
border-bottom: solid 4px #dcdcdc;
vertical-align:middle;
}
.isometric .istw{
background:#1da1f3;
border-bottom: solid 4px #1484ca;
}
.isometric .isfb{
background:#3b75d4;
border-bottom: solid 4px #2a5caf;
}
.isometric .isfdly{
background:#7ece46;
border-bottom: solid 4px #65b130;
}
.isometric .ispkt{
background:#fd7171;
border-bottom: solid 4px #ef4d4d;
}
.isometric:hover{
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
.isometric:hover .btnttl, .isometric:hover .iconback{
border-bottom: none;
}Jagged shape
Show Code
HTML
<div class="unq_btn">
<!--以下twitter-->
<a href="#" class="twitter">
<span class="fa-stack">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
<!--以下facebook-->
<a href="#" class="fb">
<span class="fa-stack">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a>
<!--以下feedly-->
<a href="#" class="feedly">
<span class="fa-stack">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x"></i>
</span>
</a>
<!--以下pocket-->
<a href="#" class="pocket">
<span class="fa-stack">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-get-pocket fa-stack-1x"></i>
</span>
</a>
<!--以下google plus-->
<a href="#" class="gplus">
<span class="fa-stack">
<i class="fa fa-certificate fa-stack-2x"></i>
<i class="fa fa-google-plus fa-stack-1x"></i>
</span>
</a>
</div>
CSS
.unq_btn a{
display: inline-block;
text-decoration: none;
font-size: 25px;
}
.unq_btn .fa-stack-1x {
color: white;
font-size: 18px;
}
.unq_btn .fa-stack-2x {
transition: .3s;
}
.unq_btn .twitter .fa-certificate {
color: #74c1f8;
}
.unq_btn .fb .fa-certificate {
color: #668ad8;
}
.unq_btn .pocket .fa-certificate {
color: #f79393;
}
.unq_btn .feedly .fa-certificate {
color: #acde71;
}
.unq_btn .gplus .fa-certificate {
color: #ed7168;
}
.unq_btn a:hover .fa-stack-2x {
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}FontAwesome icons can be easily stacked (In this example , is on ). You can see the details on Stacked Icons.
Icons on tablet
Show Code
HTML
<div class="unq_btn2">
<!--以下twitter-->
<a href="#">
<span class="fa-stack">
<i class="fa fa-tablet fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
<!--以下facebook-->
<a href="#">
<span class="fa-stack">
<i class="fa fa-tablet fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a>
<!--以下feedly-->
<a href="#">
<span class="fa-stack">
<i class="fa fa-tablet fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x"></i>
</span>
</a>
<!--以下pocket-->
<a href="#">
<span class="fa-stack">
<i class="fa fa-tablet fa-stack-2x"></i>
<i class="fa fa-get-pocket fa-stack-1x"></i>
</span>
</a>
<!--以下google plus-->
<a href="#">
<span class="fa-stack">
<i class="fa fa-tablet fa-stack-2x"></i>
<i class="fa fa-google-plus fa-stack-1x"></i>
</span>
</a>
</div>
CSS
.unq_btn2 a{
text-decoration: none;
line-height: 70px;
font-size: 18px;
margin: 5px;
}
.unq_btn2 .fa-stack-2x {
color: black;
font-size:70px;
}
.unq_btn2 .fa-stack-1x{
display: inline-block;
position: relative;
font-size: 20px;
top: 12px;
left:5px;
transition: .4s;
}
.unq_btn2 .fa-twitter {
color: #74c1f8;
}
.unq_btn2 .fa-facebook {
color: #668ad8;
}
.unq_btn2 .fa-get-pocket {
color: #f79393;
}
.unq_btn2 .fa-rss {
color: #acde71;
}
.unq_btn2 .fa-google-plus{
color: #ed7168;
}
.unq_btn2 a:hover .fa-stack-1x {
-ms-transform: rotateX(360deg);
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}3D round buttons with float hover effect
Show Code
HTML
<!--twitter-->
<a class="share_btn shtw">
<i class="fa fa-twitter"></i>
</a>
<!--facebook-->
<a class="share_btn shfb">
<i class="fa fa-facebook"></i>
</a>
<!--pocket-->
<a class="share_btn shpkt">
<i class="fa fa-get-pocket"></i>
</a>
<!--feedly-->
<a class="share_btn shfdly">
<i class="fa fa-rss"></i>
</a>
<!--googleplus-->
<a class="share_btn shgp">
<i class="fa fa-google-plus"></i>
</a>
CSS
.share_btn{
display: inline-block;
text-decoration: none;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 23px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
overflow: hidden;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
transition: .3s;
}
.share_btn .fa{
line-height: 50px;
}
.share_btn:hover {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
.shtw {
color: #22b8ff;
background-image: -webkit-linear-gradient(#aeecff 0%, #57c8ff 100%);
background-image: linear-gradient(#aeecff 0%, #57c8ff 100%);
}
.shfb {
color: #6183f3;
background-image: -webkit-linear-gradient(#b5d3ff 0%, #6b8bff 100%);
background-image: linear-gradient(#b5d3ff 0%, #6b8bff 100%);
}
.shpkt{
color: #ff6d82;
background-image: -webkit-linear-gradient(#ffcfd7 0%, #ff7285 100%);
background-image: linear-gradient(#ffcfd7 0%, #ff7285 100%);
}
.shfdly{
color: #60d245;
background-image: -webkit-linear-gradient(#b9ffca 0%, #80e067 100%);
background-image: linear-gradient(#b9ffca 0%, #80e067 100%);
}
.shgp{
color: #ea4158;
background-image: -webkit-linear-gradient(#ffa8a8 0%, #ff5d5d 100%);
background-image: linear-gradient(#ffa8a8 0%, #ff5d5d 100%);
}
Flat style with rounded corners
Show Code
HTML
<!--twitter-->
<a class="share_btn2 shtw">
<i class="fa fa-twitter"></i>
</a>
<!--facebook-->
<a class="share_btn2 shfb">
<i class="fa fa-facebook"></i>
</a>
<!--pocket-->
<a class="share_btn2 shpkt">
<i class="fa fa-get-pocket"></i>
</a>
<!--feedly-->
<a class="share_btn2 shfdly">
<i class="fa fa-rss"></i>
</a>
<!--googleplus-->
<a class="share_btn2 shgp">
<i class="fa fa-google-plus"></i>
</a>
CSS
.share_btn2{
display: inline-block;
text-decoration: none;
width: 50px;
margin:2px;
height: 50px;
line-height: 50px;
font-size: 23px;
color:white;
border-radius: 12px;
text-align: center;
vertical-align: middle;
overflow: hidden;
font-weight: bold;
transition: .3s;
}
.share_btn2 .fa {line-height:50px}
.share_btn2:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
.share_btn2.shtw {background: #22b8ff;}
.share_btn2.shfb {background: #6680d8;}
.share_btn2.shpkt {background: #ff6d82;}
.share_btn2.shfdly {background: #7bda72;}
.share_btn2.shgp {background: #fd6969;}
Twitter style
Follow
HTML
<a href="#" class="tw_followb">
<i class="fa fa-user-plus"></i> <span>Follow</span>
</a>
CSS
.tw_followb {
text-decoration: none;
background-image: linear-gradient(#fff,#f5f8fa);
border: 1px solid #e6ecf0;
border-radius: 4px;
color: #393e42;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 8px 14px;
position: relative;
}
.tw_followb .fa-user-plus{
color: #1da1f3;
}
.tw_followb:hover{
background-color: #e6ecf0;
background-image: linear-gradient(#fff,#e6ecf0);
border-color: #e6ecf0;
}
6. Unique shaped buttons
Parallelogram shape
BUTTON
HTML
<a href="#" class="deg_btn">
BUTTON
</a>
CSS
.deg_btn {
position: relative;
display: inline-block;
text-decoration: none;
padding: 0 30px;
font-size: 19px;
height: 40px;
line-height: 40px!;
vertical-align: middle;
background: #51587b;
font-size: 20px;
color: rgb(255, 255, 255);
transition: .4s;
}
.deg_btn:before {
position: absolute;
content: '';
left: 0;
top: 0;
width: 0;
height: 0;
border: none;
border-left: solid 21px white;
border-bottom: solid 41px transparent;
z-index: 1;
transition: .4s;
}
.deg_btn:after {
position: absolute;
content: '';
right: 0;
top: 0;
width: 0;
height: 0;
border: none;
border-left: solid 21px transparent;
border-bottom: solid 41px white;
z-index: 1;
transition: .4s;
}
.deg_btn:hover:before, .deg_btn:hover:after{
border-left-width: 25px;
}
.deg_btn:hover{
background: #2c3148;
}
only left and bottom border
BUTTON
HTML
<a href="#" class="part_line">
<i class="fa fa-caret-right"></i> BUTTON
</a>
CSS
.part_line{
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
border-bottom: solid 3px #668ad8;
border-left: solid 3px #668ad8;
color: #668ad8;
transition: .4s;
}
.part_line:hover {
padding-left: 0.7em;
padding-right: 0.3em;
}borders cross each other
BUTTON
HTML
<a href="#" class="cross_line">
BUTTON
</a>
CSS
.cross_line{
display: inline-block;
position: relative;
padding: 0.25em 1em;
border-top: solid 2px black;
border-bottom: solid 2px black;
text-decoration: none;
font-weight: bold;
color: #03A9F4;
}
.cross_line:before, .cross_line:after{
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
transition: .3s;
}
.cross_line:before {left: 7px;}
.cross_line:after {right: 7px;}
.cross_line:hover:before{
top: 0px;
left:0;
height: 100%;
}
.cross_line:hover:after{
top: 0px;
right: 0;
height: 100%;
}
Brackets
BUTTON
HTML
<a href="#" class="square_btn35">
BUTTON
</a>
CSS
.square_btn35{
display: inline-block;
position: relative;
padding: 0.5em 1em;
text-decoration: none;
color: #000;
transition: .4s;
}
.square_btn35:hover {
color:#ff7f7f;
}
.square_btn35:before,.square_btn35:after{
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
}
.square_btn35:before{
border-left: solid 1px #ff7f7f;
border-top: solid 1px #ff7f7f;
border-bottom: solid 1px #ff7f7f;
left: 0;
}
.square_btn35:after{
content: '';
border-top: solid 1px #ff7f7f;
border-right: solid 1px #ff7f7f;
border-bottom: solid 1px #ff7f7f;
right: 0;
}
ZigZag
BUTTON
HTML
<a href="#" class="square_btn39">
BUTTON
</a>
CSS
.square_btn39{
position: relative;
padding: 0.35em 0.7em 0.2em;
background: #668ad8;
color: #FFF;
text-decoration: none;
}
.square_btn39:before{
content: '';
position: absolute;
z-index: -2;
height: 10px;
box-sizing: border-box;
width: 100%;
top: 100%;
top: calc(100% - 2px);
left: 0;
background: linear-gradient(-135deg, #668ad8 4px, transparent 0) 0 4px, linear-gradient(135deg, #668ad8 4px, #fff 0) 0 4px;
background-color: #668ad8;
background-position: left bottom;
background-repeat: repeat-x;
background-size: 10px 10px;
transition: .2s;
}
.square_btn39:hover:before {
background-size: 13px 10px;
}