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 - Beautons Usage
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 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