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 - bttn.css Usage
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 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 −
Advertisements