CSS Buttons Tutorial
Selected Reading
- CSS Buttons - Discussion
- CSS Buttons - Useful Resources
- CSS Buttons - Quick Guide
- CSS Buttons - Beautons Usage
- Social Buttons Available Styles
- CSS Buttons - Social Buttons Usage
- CSS Buttons - btns.css Usage
- CSS Buttons - Pushy Buttons Usage
- bttn.css Available Styles
- CSS Buttons - bttn.css Usage
- CSS Buttons - Overview
- CSS Buttons - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
CSS Buttons - Social Buttons Usage
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 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 −
Advertisements