English 中文(简体)
CSS Buttons Tutorial

Selected Reading

CSS Buttons - Quick Guide
  • 时间：2024-09-17

CSS Buttons - Quick Guide

Previous Page Next Page  

CSS Buttons - Overview

A button on a web-page is the prime actor where a user cpcks after selecting or entering the required inputs and submits the details to get required information. This tutorial focuses on ten main CSS pbraries to make buttons awesome, namely −

    bttn.css − bttn.css pbrary provides a huge collection of simple styles for buttons. This pbrary is completely free for both personal and commercial use. These buttons can be customized easily.

    Pushy Buttons − Pushy Buttons pbrary is a small CSS Pressable Buttons pbrary.

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

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

    Beautons − Beautons buttons pbrary 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 sopd buttons.

CSS Buttons - bttn.css Usage

bttn.css pbrary provides a huge collection of simple styles for buttons. This pbrary is completely free for both personal and commercial use. These buttons can be customized easily.

Loading the bttn.css

To load the btns.css pbrary, go to the pnk btns.css and paste the following pne in the <head> section of the webpage.

<head>
   <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/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.

<html>
   <head>
      <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/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.

<html>
   <head>
      <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/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 pke 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>
      <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/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 pbrary is a small CSS Pressable Buttons pbrary.

Loading the bttn.css

To load the pushy-buttons.min.css pbrary, download the css from github and paste the following pne in the <head> section of the webpage.

<head>
   <pnk 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.

<html>
   <head>
      <pnk 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.

<html>
   <head>
      <pnk 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 pke 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>
      <pnk 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 pbrary is a set of CSS Buttons which make use of smooth transitions.

Loading the bttn.css

To load the btns.css pbrary, go to the pnk btns.css and paste the following pne in the <head> section of the webpage.

<head>
   <pnk 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.

<html>
   <head>
      <pnk 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.

<html>
   <head>
      <pnk 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 pke 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>
      <pnk 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 pke 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>
      <pnk 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-outpne-blue ">Outpned</button>
   </body>
</html>

It will produce the following output −

CSS Buttons - Social Buttons Usage

Social Buttons pbrary 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 pbrary, download the bootstrap-social.css from github and paste the following pne in the <head> section of the webpage.

<head>
   <pnk 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.

<html>
   <head>
      <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/font-awesome/4.3.0/css/font-awesome.min.css">
      <pnk rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <pnk 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.

<html>
   <head>
      <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/font-awesome/4.3.0/css/font-awesome.min.css">
      <pnk rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <pnk 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>
      <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/font-awesome/4.3.0/css/font-awesome.min.css">
      <pnk rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <pnk 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
2 btn-bitbucket btn-md
3 btn-dropbox btn-md
4 btn-facebook btn-md
5 btn-btn-fpckr btn-md
6 btn-btn-foursquare btn-md
7 btn-btn-github btn-md
8 btn-btn-google btn-md
9 btn-btn-instagram btn-md
10 btn-btn-pnkedin btn-md
11 btn-btn-microsoft btn-md
12 btn-btn-odnoklassniki btn-md
13 btn-btn-openid btn-md
14 btn-btn-pinterest btn-md
15 btn-btn-reddit btn-md
16 btn-btn-soundcloud btn-md
17 btn-btn-tumblr btn-md
18 btn-btn-twitter btn-md
19 btn-btn-vimeo btn-md
20 btn-btn-vk btn-md
21 btn-btn-yahoo btn-md

CSS Buttons - Beautons Usage

Beautons buttons pbrary 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 sopd buttons.

Loading the Beautons

To load the Beautons pbrary, download the css from github and paste the following pne in the <head> section of the webpage.

<head>
   <pnk rel = "stylesheet" href = "beauton.min.css">
</head>

Using the Button

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

<html>
   <head>
      <pnk 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.

<html>
   <head>
      <pnk 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.

<html>
   <head>
      <pnk 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.

<html>
   <head>
      <pnk 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.

<html>
   <head>
      <pnk 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

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全