CSS Buttons - Quick Guide


Advertisements


CSS Buttons - Overview

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.

  • 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.

  • 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.

CSS Buttons - bttn.css Usage

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.

Loading the bttn.css

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>

Using the Button

Create a button using html button tag and add styles bttn-slant, bttn-royal with size specifier bttn-lg.

Live Demo
<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 −

Defining the Size

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.

Live Demo
<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 −

Defining the Color

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.

Live Demo
<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 −

CSS Buttons - bttn.css Available Styles

Following are the various styles available in bttn.css

Sr. No. Style Medium Size Primary Color Demo
1 bttn-slant bttn-md bttn-primary
2 bttn-unite bttn-md bttn-primary
3 bttn-pill bttn-md bttn-primary
4 bttn-float bttn-md bttn-primary
5 bttn-material-flat bttn-md bttn-primary
6 bttn-material-circle bttn-md bttn-primary
7 bttn-fill-circle bttn-md bttn-primary
8 bttn-gradient bttn-md bttn-primary
9 bttn-jelly bttn-md bttn-primary
10 bttn-stretch bttn-md bttn-primary
11 bttn-minimal bttn-md bttn-primary
12 bttn-bordered bttn-md bttn-primary
13 bttn-simple bttn-md bttn-primary

CSS Buttons - Pushy Buttons Usage

Pushy Buttons library is a small CSS Pressable Buttons library.

Loading the bttn.css

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>

Using the Button

Create a button using html button tag and add styles btn, btn-blue with size specifier btn-lg.

Live Demo
<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 −

Defining the Size

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.

Live Demo
<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 −

Defining the Color

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.

Live Demo
<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 −

CSS Buttons - btns.css Usage

btns.css buttons library is a set of CSS Buttons which make use of smooth transitions.

Loading the bttn.css

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>

Using the Button

Create a button using html button tag and add styles btn, btn-blue with size specifier btn-lg.

Live Demo
<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 −

Defining the Size

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.

Live Demo
<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 −

Defining the Color

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.

Live Demo
<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 −

Defining the Style

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.

Live Demo
<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 −

CSS Buttons - Social Buttons Usage

Social Buttons library is a set of CSS Buttons made in pure CSS and are based on Bootstrap and Font Awesome.

Loading the Social Buttons

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>

Using the Button

Create a button using html anchor tag and add styles btn, btn-block with social specifier btn-social.

Live Demo
<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 −

Defining the Size

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.

Live Demo
<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 −

Using the Icons only

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 −

CSS Buttons - Social Buttons Available Styles

Following are the various styles available in Social Buttons.

Sr.No. Style Medium Size Button Icon Button
1 btn-twitter btn-md Login with Twitter
2 btn-bitbucket btn-md Login with Bitbucket
3 btn-dropbox btn-md Login with Dropbox
4 btn-facebook btn-md Login with Facebook
5 btn-btn-flickr btn-md Login with Flickr
6 btn-btn-foursquare btn-md Login with Foursquare
7 btn-btn-github btn-md Login with Github
8 btn-btn-google btn-md Login with Google
9 btn-btn-instagram btn-md Login with Instagram
10 btn-btn-linkedin btn-md Login with Linkedin
11 btn-btn-microsoft btn-md Login with Microsoft
12 btn-btn-odnoklassniki btn-md Login with Odnoklassniki
13 btn-btn-openid btn-md Login with Openid
14 btn-btn-pinterest btn-md Login with Pinterest
15 btn-btn-reddit btn-md Login with Reddit
16 btn-btn-soundcloud btn-md Login with Soundcloud
17 btn-btn-tumblr btn-md Login with Tumblr
18 btn-btn-twitter btn-md Login with Twitter
19 btn-btn-vimeo btn-md Login with Vimeo
20 btn-btn-vk btn-md Login with Vk
21 btn-btn-yahoo btn-md Login with Yahoo

CSS Buttons - Beautons Usage

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.

Loading the Beautons

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>

Using the Button

Create a button using html button tag and add styles btn.

Live Demo
<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 −

Defining the Size

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.

Live Demo
<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 −









Defining the Font Size

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.

Live Demo
<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 −







Defining the Functional Buttons

The following example shows various functional button.

Live Demo
<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 −











Combining the Styles

The following example shows how to combines the styles of the buttons.

Live Demo
<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 in a paragraph.



Advertisements