TheBestTutorials.css Buttons
Buttons
With TheBestTutorials.css, all HTML elements can be buttons.
But the most common elements are <input>, <button>, and <a>:
Example
<button class="subhodaya-btn">Button Button</button>
<a class="subhodaya-btn" href="http://tutorials">Link Button</a>
Button Colors
Buttons come in all the colors you need:
Example
<button class="subhodaya-btn subhodaya-yellow">Yellow</button>
<button class="subhodaya-btn subhodaya-orange">Orange</button>
<button class="subhodaya-btn subhodaya-red">Red</button>
<button class="subhodaya-btn subhodaya-purple">Purple</button>
Hover Colors
Hover effects come in all the colors you need:
Example
<button class="subhodaya-btn subhodaya-hover-white">White</button>
<button class="subhodaya-btn subhodaya-hover-red">Red</button>
<button class="subhodaya-btn subhodaya-hover-purple">Purple</button>
Button Shapes
Buttons come in all the shapes you need:
Example
<button class="subhodaya-btn subhodaya-round">Round</button>
<button class="subhodaya-btn subhodaya-round-large">Rounder</button>
<button class="subhodaya-btn subhodaya-round-xlarge">and Rounder</button>
<button class="subhodaya-btn subhodaya-round-xxlarge">and Rounder</button>
Button Sizes
Buttons come in all the sizes you need:
Example
<button class="subhodaya-btn subhodaya-small">Small</button>
<button class="subhodaya-btn subhodaya-medium">Medium</button>
<button class="subhodaya-btn subhodaya-large">Large</button>
<button class="subhodaya-btn subhodaya-xlarge">xLarge</button>
Button Borders
Buttons can have borders.
Example
<button class="subhodaya-btn subhodaya-light-grey subhodaya-border">Button</button>
<button class="subhodaya-btn subhodaya-yellow subhodaya-border">Button</button>
<button class="subhodaya-btn subhodaya-white subhodaya-border subhodaya-round">Round</button>
<button class="subhodaya-btn subhodaya-white subhodaya-border subhodaya-round-large">Round</button>
<button class="subhodaya-btn subhodaya-white subhodaya-border subhodaya-round-xlarge">Round</button>
<button class="subhodaya-btn subhodaya-white subhodaya-border subhodaya-border-blue subhodaya-round">Button</button>
Buttons with Text Effects
Buttons can have italic and bold text effects.
Example
<button class="subhodaya-btn"><i>Italic</i></button>
<button class="subhodaya-btn"><b>Bold</b></button>
Buttons can have shadow text effects.
Example
<button class="subhodaya-btn subhodaya-red subhodaya-text-shadow"><i>Shadow</i></button>
<button class="subhodaya-btn subhodaya-red subhodaya-text-shadow"><b>Shadow</b></button>
Buttons can have slim and wide text effects.
Example
<button class="subhodaya-btn subhodaya-slim">Slim</button>
<button class="subhodaya-btn subhodaya-wide">Wide</button>
Padded Buttons
To create a padded button, add a TheBestTutorials-padding class to the button.
Example
<button class="subhodaya-btn subhodaya-padding-xlarge">Button</button>
<button class="subhodaya-btn subhodaya-padding-xxlarge">Button</button>
Full-width Buttons
To create a full-width button, add the subhodaya-btn-block class to an element.
Full-width buttons have a width of 100%, and spans the entire width of the parent element:
Example
<button class="subhodaya-btn-block subhodaya-teal">Button</button>
<button class="subhodaya-btn-block subhodaya-red subhodaya-left-align">Button</button>
Hover Effects / Disabled Buttons
Buttons stands out with a shadow effect when you mouse over them.
Normal buttons display a finger pointer.
Disabled buttons are opaque and display a "no parking sign".
Example
<button class="subhodaya-btn subhodaya-disabled">Button</button>
<input type="button" class="subhodaya-btn" value="Button">
<input type="button" class="subhodaya-btn" value="Button" disabled>
Button Groups
Buttons can be grouped together (without space in between) using "subhodaya-btn-group":
Example
<button class="subhodaya-btn">Button</button>
<button class="subhodaya-btn subhodaya-teal">Button</button>
<button class="subhodaya-btn subhodaya-disabled">Button</button>
</div>
<div class="subhodaya-btn-group">
<button class="subhodaya-btn" style="width:33.3%">Button</button>
<button class="subhodaya-btn subhodaya-teal" style="width:33.3%">Button</button>
<button class="subhodaya-btn subhodaya-disabled" style="width:33.3%">Button</button>
</div>
If you want two button groups on the same line (if it is room for it), use the TheBestTutorials-show-inline-block class:
Example
<button class="subhodaya-btn">Button</button>
<button class="subhodaya-btn subhodaya-teal">Button</button>
<button class="subhodaya-btn subhodaya-disabled">Button</button>
</div>
<div class="subhodaya-btn-group subhodaya-show-inline-block">
<button class="subhodaya-btn">Button</button>
<button class="subhodaya-btn subhodaya-teal">Button</button>
<button class="subhodaya-btn subhodaya-disabled">Button</button>
</div>
Button Bars
The "TheBestTutorials-btn-bar" class is similar to "TheBestTutorials-btn-group", except that the buttons inherit the background-color of their container and get a grey background-color on hover, instead of shadows:
Example
<button class="subhodaya-btn">Button</button>
<button class="subhodaya-btn">Button</button>
<button class="subhodaya-btn">Button</button>
</div>
Buttons with Ripple Effects
Buttons can have ripple effects when they are clicked on:
Example
<button class="subhodaya-btn subhodaya-ripple subhodaya-red">Button</button>
<button class="subhodaya-btn subhodaya-ripple subhodaya-yellow">Button</button>
Button Elements
With TheBestTutorials.css, all elements can be a button.
A picture can be a button
Any div, header, footer or other containers can be a button.
Floating Buttons
The TheBestTutorials-btn-floating class, creates circular buttons that are meant for important functions:
Example
<a class="subhodaya-btn-floating subhodaya-disabled">+</a>
Use the TheBestTutorials-btn-floating-large class for large floating buttons:
Example
<a class="subhodaya-btn-floating-large subhodaya-disabled">+</a>
