Buttons
Base Class
Base class of the button .jkbtn
Menu
1. Basic Button Styles
JKCSS have variant colors of buttons. And also all .jkbtn classes design for all <button>
<button class="jkbtn jkbtn-blue"> Button Blue </button>
<button class="jkbtn jkbtn-gray"> Button Gray </button>
<button class="jkbtn jkbtn-green"> Button Green </button>
<button class="jkbtn jkbtn-red"> Button Red </button>
<button class="jkbtn jkbtn-yellow"> Button Yellow </button>
<button class="jkbtn jkbtn-info"> Button Info </button>
<button class="jkbtn jkbtn-gray"> Button Gray </button>
<button class="jkbtn jkbtn-green"> Button Green </button>
<button class="jkbtn jkbtn-red"> Button Red </button>
<button class="jkbtn jkbtn-yellow"> Button Yellow </button>
<button class="jkbtn jkbtn-info"> Button Info </button>
2. Outline Button Styles
In need the JKCSS design outline buttons. you can call .jkbtn-blue-outline the "blue" can be change according to the colors for the buttons
<button class="jkbtn jkbtn-blue-outline"> Button Blue Outline </button>
<button class="jkbtn jkbtn-gray-outline"> Button Gray Outline </button>
<button class="jkbtn jkbtn-green-outline"> Button Green Outline </button>
<button class="jkbtn jkbtn-red-outline"> Button Red Outline </button>
<button class="jkbtn jkbtn-yellow-outline"> Button Yellow Outline </button>
<button class="jkbtn jkbtn-info-outline"> Button Info Outline </button>
<button class="jkbtn jkbtn-gray-outline"> Button Gray Outline </button>
<button class="jkbtn jkbtn-green-outline"> Button Green Outline </button>
<button class="jkbtn jkbtn-red-outline"> Button Red Outline </button>
<button class="jkbtn jkbtn-yellow-outline"> Button Yellow Outline </button>
<button class="jkbtn jkbtn-info-outline"> Button Info Outline </button>
3. Disabled state All Buttons
According to HTML buttons if you want to inactive a button you can add disabled attribute any Buttons like following
<button class="jkbtn jkbtn-blue" disabled> Button Blue </button>
<button class="jkbtn jkbtn-gray" disabled> Button Gray </button>
<button class="jkbtn jkbtn-blue-outline" disabled> Button Blue Outline </button>
<button class="jkbtn jkbtn-gray-outline" disabled> Button Gray Outline </button>
<button class="jkbtn jkbtn-gray" disabled> Button Gray </button>
<button class="jkbtn jkbtn-blue-outline" disabled> Button Blue Outline </button>
<button class="jkbtn jkbtn-gray-outline" disabled> Button Gray Outline </button>
4. Button Sizes
The JKCSS include small buttons also jkbtn-sm and large buttons jkbtn-lg
Small Buttons
<button class="jkbtn-sm jkbtn-blue"> Button Small Blue </button>
<button class="jkbtn-sm jkbtn-gray"> Button Small Gray </button>
<button class="jkbtn-sm jkbtn-blue-outline"> Button Small Blue Outline </button>
<button class="jkbtn-sm jkbtn-gray-outline"> Button Small Gray Outline </button>
<button class="jkbtn-sm jkbtn-gray"> Button Small Gray </button>
<button class="jkbtn-sm jkbtn-blue-outline"> Button Small Blue Outline </button>
<button class="jkbtn-sm jkbtn-gray-outline"> Button Small Gray Outline </button>
Large Buttons
<button class="jkbtn-lg jkbtn-blue"> Button Large Blue </button>
<button class="jkbtn-lg jkbtn-gray"> Button Large Gray </button>
<button class="jkbtn-lg jkbtn-blue-outline"> Button Large Blue Outline </button>
<button class="jkbtn-lg jkbtn-gray-outline"> Button Large Gray Outline </button>
<button class="jkbtn-lg jkbtn-gray"> Button Large Gray </button>
<button class="jkbtn-lg jkbtn-blue-outline"> Button Large Blue Outline </button>
<button class="jkbtn-lg jkbtn-gray-outline"> Button Large Gray Outline </button>
5. Button Groups
This is the button group of JKCSS btn-group is the base class of the button group
And you can use any button color style with btn-group like following.
Base button group
<div class="btn-group" role="group">
<button class="jkbtn jkbtn-blue"> Button 1 </button>
<button class="jkbtn jkbtn-blue"> Button 2 </button>
<button class="jkbtn jkbtn-blue"> Button 3 </button>
<button class="jkbtn jkbtn-blue"> Button 4 </button>
</div>
<button class="jkbtn jkbtn-blue"> Button 1 </button>
<button class="jkbtn jkbtn-blue"> Button 2 </button>
<button class="jkbtn jkbtn-blue"> Button 3 </button>
<button class="jkbtn jkbtn-blue"> Button 4 </button>
</div>
Outline button group
<div class="btn-group" role="group">
<button class="jkbtn jkbtn-blue-outline"> Button 1 </button>
<button class="jkbtn jkbtn-blue-outline"> Button 2 </button>
<button class="jkbtn jkbtn-blue-outline"> Button 3 </button>
<button class="jkbtn jkbtn-blue-outline"> Button 4 </button>
</div>
<button class="jkbtn jkbtn-blue-outline"> Button 1 </button>
<button class="jkbtn jkbtn-blue-outline"> Button 2 </button>
<button class="jkbtn jkbtn-blue-outline"> Button 3 </button>
<button class="jkbtn jkbtn-blue-outline"> Button 4 </button>
</div>
Mix button group
<div class="btn-group" role="group">
<button class="jkbtn jkbtn-blue"> Button 1 </button>
<button class="jkbtn jkbtn-red"> Button 2 </button>
<button class="jkbtn jkbtn-green"> Button 3 </button>
<button class="jkbtn jkbtn-yellow"> Button 4 </button>
</div>
<button class="jkbtn jkbtn-blue"> Button 1 </button>
<button class="jkbtn jkbtn-red"> Button 2 </button>
<button class="jkbtn jkbtn-green"> Button 3 </button>
<button class="jkbtn jkbtn-yellow"> Button 4 </button>
</div>
Outline Mix button group
<div class="btn-group" role="group">
<button class="jkbtn jkbtn-blue-outline"> Button 1 </button>
<button class="jkbtn jkbtn-red-outline"> Button 2 </button>
<button class="jkbtn jkbtn-green-outline"> Button 3 </button>
<button class="jkbtn jkbtn-yellow-outline"> Button 4 </button>
</div>
<button class="jkbtn jkbtn-blue-outline"> Button 1 </button>
<button class="jkbtn jkbtn-red-outline"> Button 2 </button>
<button class="jkbtn jkbtn-green-outline"> Button 3 </button>
<button class="jkbtn jkbtn-yellow-outline"> Button 4 </button>
</div>