Cool And Responsive Buttons With A Few Lines Of CSS

Federico Dossena Home Projects Blog About me

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

Button Another button

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

Button Very pretentious long button

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

Button It's getting old

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)

Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7

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)

Download View source code on SJWhub

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)

Ok Cancel

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)

Login Register J Login with your SJWhub account

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

New document Cancel

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.

Facebark SJWHub Plebbit 4chin

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

Comments on this article have been disabled because of street shitters. ©2015-2024 Federico Dossena, all rights reserved. Privacy Policy