CSS Buttons - Quick Guide

A button on a web-page is the prime actor where a user clicks after selecting or entering the required inputs and submits the details to get required information. This tutorial focuses on ten main CSS libraries to make buttons awesome, namely −
bttn.css − bttn.css library provides a huge collection of simple styles for buttons. This library is completely free for both personal and commercial use. These buttons can be customized easily.
bttn.css − bttn.css library provides a huge collection of simple styles for buttons. This library is completely free for both personal and commercial use. These buttons can be customized easily.
Pushy Buttons − Pushy Buttons library is a small CSS Pressable Buttons library.
Pushy Buttons − Pushy Buttons library is a small CSS Pressable Buttons library.
btns.css − btns.css buttons library is a set of CSS Buttons which make use of smooth transitions.
btns.css − btns.css buttons library is a set of CSS Buttons which make use of smooth transitions.
Social Buttons − Social Buttons library is a set of CSS Buttons made in pure CSS and are based on Bootstrap and Font Awesome.
Social Buttons − Social Buttons library is a set of CSS Buttons made in pure CSS and are based on Bootstrap and Font Awesome.
Beautons − Beautons buttons library is a simple CSS toolkit for creating buttons. It allows to apply a combination of styles, sizes to create a huge set of consistent, robust and solid buttons.
Beautons − Beautons buttons library is a simple CSS toolkit for creating buttons. It allows to apply a combination of styles, sizes to create a huge set of consistent, robust and solid buttons.
bttn.css library provides a huge collection of simple styles for buttons. This library is completely free for both personal and commercial use. These buttons can be customized easily.
To load the btns.css library, go to the link btns.css and paste the following line in the <head> section of the webpage.
<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

Create a button using html button tag and add styles bttn-slant, bttn-royal with size specifier bttn-lg.
<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-slant">Submit</button>
   </body>
</html>
It will produce the following output −
You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.
<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra Small</button>
   </body>
</html>
It will produce the following output −
Just like size, you can define the color of the button using CSS. The following example shows how to change the color of the button.
<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>
It will produce the following output −
Following are the various styles available in bttn.css
Pushy Buttons library is a small CSS Pressable Buttons library.
To load the pushy-buttons.min.css library, download the css from github and paste the following line in the <head> section of the webpage.
<head>
   <link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>

Create a button using html button tag and add styles btn, btn-blue with size specifier btn-lg.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--blue">Submit</button>
   </body>
</html>
It will produce the following output −
You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--blue">Large</button>
      <button class = "btn btn--df btn--blue">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
      <button class = "btn btn--sm btn--blue">Small</button>
   </body>
</html>
It will produce the following output −
Just like size, you can define the color of the button using CSS. The following example shows how to change the color of the button.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--red">Large</button>
      <button class = "btn btn--df btn--green">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
   </body>
</html>
It will produce the following output −
btns.css buttons library is a set of CSS Buttons which make use of smooth transitions.
To load the btns.css library, go to the link btns.css and paste the following line in the <head> section of the webpage.
<head>
   <link rel = "stylesheet" href = "btns.css">
</head>

Create a button using html button tag and add styles btn, btn-blue with size specifier btn-lg.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-blue">Submit</button>
   </body>
</html>
It will produce the following output −
You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Large</button>   
      <button class = "btn btn-sm btn-blue">Small</button>
   </body>
</html>
It will produce the following output −
Just like size, you can define the color of the button using CSS. The following example shows how to change the color of the button.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-red">Red</button>   
      <button class = "btn btn-lg btn-blue">Blue</button>
      <button class = "btn btn-lg btn-green">Green</button>
      <button class = "btn btn-lg btn-sea">Sea</button>   
      <button class = "btn btn-lg btn-yellow">Yellow</button>
      <button class = "btn btn-lg btn-orange">Orange</button>  
      <button class = "btn btn-lg btn-purple">Purple</button>   
      <button class = "btn btn-lg btn-black">Black</button>
      <button class = "btn btn-lg btn-cloud">Cloud</button>
      <button class = "btn btn-lg btn-grey">Grey</button>
   </body>
</html>
It will produce the following output −
Just like size,color you can define the style of the button using CSS. The following example shows how to change the style of the button.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Regular</button>   
      <button class = "btn btn-lg btn-blue btn-round">Round</button>
      <button class = "btn btn-lg btn-blue btn-raised">Raised</button>
      <button class = "btn btn-blue btn-sm">Small</button>   
      <button class = "btn btn-lg btn-outline-blue ">Outlined</button>
   </body>
</html>
It will produce the following output −
Social Buttons library is a set of CSS Buttons made in pure CSS and are based on Bootstrap and Font Awesome.
To load the bootstrap-social.css library, download the bootstrap-social.css from github and paste the following line in the <head> section of the webpage.
<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

Create a button using html anchor tag and add styles btn, btn-block with social specifier btn-social.
<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>
It will produce the following output −
You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.
<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>
It will produce the following output −
The following example shows how to choose icon only buttons.
<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>
It will produce the following output −
Following are the various styles available in Social Buttons.
Beautons buttons library is a simple CSS toolkit for creating buttons. It allows to apply a combination of styles, sizes to create a huge set of consistent, robust and solid buttons.
To load the Beautons library, download the css from github and paste the following line in the <head> section of the webpage.
<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

Create a button using html button tag and add styles btn.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<Submit</button>
   </body>
</html>
It will produce the following output −
You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>
It will produce the following output −
You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>
It will produce the following output −
The following example shows various functional button.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>
It will produce the following output −
The following example shows how to combines the styles of the buttons.
<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>
It will produce the following output −
A button in a paragraph.

    33 Lectures 
     2.5 hours 

 Anadi Sharma

    26 Lectures 
     2.5 hours 

 Frahaan Hussain

    44 Lectures 
     4.5 hours 

 DigiFisk (Programming Is Fun)

    21 Lectures 
     2.5 hours 

 DigiFisk (Programming Is Fun)

    51 Lectures 
     7.5 hours 

 DigiFisk (Programming Is Fun)

    52 Lectures 
     4 hours 

 DigiFisk (Programming Is Fun)
 Print
 Add Notes
 Bookmark this page