Old browser

This article shows off HTML5 features, don't you think it would be a good idea to read it with a browser that supports these features so you can see them?

Cool and responsive buttons with a few lines of CSS

In the last years, the web has been invaded by the cool buttons provided by libraries like Bootstrap.
Even if these libraries are cool and feature rich, they're also really heavy, and it's a waste to load hundreds of kilobytes if you need to show just one button.

In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS.
I will be using the Roboto Light font a lot, so you might want to download it.
You are free to copy, modify and use this code as you wish.

All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.

Button 1

CSS
a.button1{
 display:inline-block;
 padding:0.35em 1.2em;
 border:0.1em solid #FFFFFF;
 margin:0 0.3em 0.3em 0;
 border-radius:0.12em;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 font-weight:300;
 color:#FFFFFF;
 text-align:center;
 transition: all 0.2s;
}
a.button1:hover{
 color:#000000;
 background-color:#FFFFFF;
}
@media all and (max-width:30em){
 a.button1{
  display:block;
  margin:0.4em auto;
 }
}
HTML
<a href="something" class="button1">Button&lt/a>
<a href="something" class="button1">Another button&lt/a>

Button 2

CSS
a.button2{
 display:inline-block;
 padding:0.5em 3em;
 border:0.16em solid #FFFFFF;
 margin:0 0.3em 0.3em 0;
 box-sizing: border-box;
 text-decoration:none;
 text-transform:uppercase;
 font-family:'Roboto',sans-serif;
 font-weight:400;
 color:#FFFFFF;
 text-align:center;
 transition: all 0.15s;
}
a.button2:hover{
 color:#DDDDDD;
 border-color:#DDDDDD;
}
a.button2:active{
 color:#BBBBBB;
 border-color:#BBBBBB;
}
@media all and (max-width:30em){
 a.button2{
  display:block;
  margin:0.4em auto;
 }
}
HTML
<a href="something" class="button2">Button&lt/a>
<a href="something" class="button2">Very pretentious long button&lt/a>

Button 3

CSS
a.button3{
 display:inline-block;
 padding:0.3em 1.2em;
 margin:0 0.3em 0.3em 0;
 border-radius:2em;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 font-weight:300;
 color:#FFFFFF;
 background-color:#4eb5f1;
 text-align:center;
 transition: all 0.2s;
}
a.button3:hover{
 background-color:#4095c6;
}
@media all and (max-width:30em){
 a.button3{
  display:block;
  margin:0.2em auto;
 }
}
HTML
<a href="something" class="button3">Button&lt/a>
<a href="something" class="button3">It's getting old&lt/a>

Button 4 (Customizable)

CSS
a.button4{
 display:inline-block;
 padding:0.3em 1.2em;
 margin:0 0.1em 0.1em 0;
 border:0.16em solid rgba(255,255,255,0);
 border-radius:2em;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 font-weight:300;
 color:#FFFFFF;
 text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
 text-align:center;
 transition: all 0.2s;
}
a.button4:hover{
 border-color: rgba(255,255,255,1);
}
@media all and (max-width:30em){
 a.button4{
  display:block;
  margin:0.2em auto;
 }
}
HTML
<a href="something" class="button4" style="background-color:#f14e4e">Button 1&lt/a>
<a href="something" class="button4" style="background-color:#f1bb4e">Button 2&lt/a>
<a href="something" class="button4" style="background-color:#84f14e">Button 3&lt/a>
<a href="something" class="button4" style="background-color:#4ef18f">Button 4&lt/a>
<a href="something" class="button4" style="background-color:#4e9af1">Button 5&lt/a>
<a href="something" class="button4" style="background-color:#9a4ef1">Button 6&lt/a>
<a href="something" class="button4" style="background-color:#f14ebd">Button 7&lt/a>

Button 5 (Customizable)

CSS
a.button5{
 display:inline-block;
 padding:0.46em 1.6em;
 border:0.1em solid #000000;
 margin:0 0.2em 0.2em 0;
 border-radius:0.12em;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 font-weight:300;
 color:#000000;
 text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
 background-color:#FFFFFF;
 text-align:center;
 transition: all 0.15s;
}
a.button5:hover{
 text-shadow: 0 0 2em rgba(255,255,255,1);
 color:#FFFFFF;
 border-color:#FFFFFF;
}
@media all and (max-width:30em){
 a.button5{
  display:block;
  margin:0.4em auto;
 }
}
HTML
<div style="font-size:1.5em">
 <a href="something" class="button5" style="background-color:#42cc8c;">Download&lt/a>
 <a href="something" class="button5" style="border-color:#FFFFFF; background-color:rgba(0,0,0,0); color:#FFFFFF">View source code on SJWhub&lt/a>
</div>

Button 6 (Customizable)

CSS
a.button6{
 display:inline-block;
 padding:0.7em 1.4em;
 margin:0 0.3em 0.3em 0;
 border-radius:0.15em;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 text-transform:uppercase;
 font-weight:400;
 color:#FFFFFF;
 background-color:#3369ff;
 box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
 text-align:center;
 position:relative;
}
a.button6:active{
 top:0.1em;
}
@media all and (max-width:30em){
 a.button6{
  display:block;
  margin:0.4em auto;
 }
}
HTML
<a href="something" class="button6">Ok&lt/a>
<a href="something" class="button6" style="background-color:#668fff">Cancel&lt/a>

Button 7 (Customizable)

CSS
a.button7{
 display:inline-block;
 padding:0.7em 1.7em;
 margin:0 0.3em 0.3em 0;
 border-radius:0.2em;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 font-weight:400;
 color:#FFFFFF;
 background-color:#3369ff;
 box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
 text-align:center;
 position:relative;
}
a.button7:active{
 box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}
@media all and (max-width:30em){
 a.button7{
  display:block;
  margin:0.4em auto;
 }
}
HTML
<a href="something" class="button7" style="background-color:#2979FF">Login&lt/a>
<a href="something" class="button7" style="background-color:#CCCCCC; color:#000000">Register&lt/a>
<br/><br/>
<a href="something" class="button7" style="background-color:#a24dcc">
 <span style="font-size:3em; font-family:'Comic Sans MS'; border-right:1px solid rgba(255,255,255,0.5); padding-right:0.3em; margin-right:0.3em; vertical-align:middle">J</span>
 Login with your SJWhub account
</a>

Button 8

CSS
a.button8{
 display:inline-block;
 padding:0.2em 1.45em;
 margin:0.1em;
 border:0.15em solid #CCCCCC;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Segoe UI','Roboto',sans-serif;
 font-weight:400;
 color:#000000;
 background-color:#CCCCCC;
 text-align:center;
 position:relative;
}
a.button8:hover{
 border-color:#7a7a7a;
}
a.button8:active{
 background-color:#999999;
}
@media all and (max-width:30em){
 a.button8{
  display:block;
  margin:0.2em auto;
 }
}
HTML
<a href="something" class="button8">New document&lt/a>
<a href="something" class="button8">Cancel&lt/a>

Idle amination: bouncy bouncy

You can apply this animation to all the buttons shown before.

CSS
.bouncy{
 animation:bouncy 5s infinite linear;
 position:relative;
}
@keyframes bouncy {
 0%{top:0em}
 40%{top:0em}
 43%{top:-0.9em}
 46%{top:0em}
 48%{top:-0.4em}
 50%{top:0em}
 100%{top:0em;}
}
HTML
<a href="something" class="button1 bouncy">Facebark</a>
<a href="something" class="button1 bouncy" style="animation-delay:0.07s">SJWHub</a>
<a href="something" class="button1 bouncy" style="animation-delay:0.14s">Plebbit</a>
<a href="something" class="button1 bouncy" style="animation-delay:0.21s">4chin</a>

Share this article

Comments