Swavy UI button is used for clicking and toggling elements and also for form submission or reset
To add rounded corners to Swavy UI button, add sw_rsq-2 to the class attribute of the button element. You can set the depth of the rounded corners ranging from 1 - 8
To set background color for Swavy UI button, you can use any color from the color spectrum, for example, add bg-salmon to the class attribute of the button element to add background color of salmon
To set outline (border) for Swavy UI button, add sw_btn-outline to the class attribute of the button element
Disabled Anchor
<button class="sw_btn sw_btn-small sw_rsq-2">Small Button</button>
<button class="sw_btn bg-jagged_ice">Normal Button</button>
<button class="sw_btn sw_btn-outline">Normal Outline Button</button>
<button class="sw_btn" disabled>Disabled Button</button>
<a href="#" class="sw_btn sw_disabled" role="button" disabled="disabled">Disabled Anchor</a>
<button class="sw_btn sw_btn-large bg-none br-navy">Large Button</button>
<button class="sw_btn sw_btn-block bg-whiskey st-white">Block Button</button>
<div class="sw_btn-group sw_btn-group-small">
<button class="sw_btn">Apple</button>
<button class="sw_btn active">Mango</button>
<button class="sw_btn">Pawpaw</button>
</div>
<div class="sw_btn-group sw_btn-group-outline br-beige">
<button class="sw_btn">Apple</button>
<button class="sw_btn">Mango</button>
<button class="sw_btn">Pawpaw</button>
</div>
<div class="sw_btn-group sw_btn-group-outline sw_rsq-2">
<button class="sw_btn active">Apple</button>
<button class="sw_btn">Mango</button>
<button class="sw_btn sw_dropdown-trigger">Dropdown</button>
<ul class="sw_dropdown-content">
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu1</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu2</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu3</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu4</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu5</a></li>
</ul>
</div>
<div class="sw_btn-group sw_btn-group-large sw_rsq-4 bg-honey">
<button class="sw_btn st-white">Apple</button>
<button class="sw_btn st-white">Mango</button>
<button class="sw_btn st-white">Pawpaw</button>
</div>
<div class="sw_btn-group sw_btn-group-vertical">
<button class="sw_btn">Apple</button>
<button class="sw_btn">Mango</button>
<button class="sw_btn">Pawpaw</button>
</div>
<div class="sw_btn-group sw_btn-group-vertical bg-maroon st-white sw_rsq-2">
<button class="sw_btn">Apple</button>
<button class="sw_btn">Mango</button>
<button class="sw_btn sw_dropdown-trigger">Dropdown</button>
<ul class="sw_dropdown-content">
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu1</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu2</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu3</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu4</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu5</a></li>
</ul>
</div>
<div class="sw_btn-group sw_btn-group-large sw_btn-group-outline sw_rsq-3 sw_btn-group-vertical">
<button class="sw_btn">Apple</button>
<button class="sw_btn">Mango</button>
<button class="sw_btn">Pawpaw</button>
</div>
<div class="sw_btn-group sw_rsq-2 sw_btn-split">
<button class="sw_btn">
<i class="fa-solid fa-home font_xd-2 st-xanadu"></i>
</button>
<button class="sw_btn sw_btn-split-item">Split Button</button>
</div>
<div class="sw_btn-group sw_btn-group-outline sw_rsq-2 sw_btn-split">
<button class="sw_btn">Split Button</button>
<button class="sw_btn sw_dropdown-trigger"></button>
<ul class="sw_dropdown-content">
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu1</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu2</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu3</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu4</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu5</a></li>
</ul>
</div>
<div class="sw_btn-group sw_btn-group-large sw_btn-group-outline sw_rsq-2 sw_btn-split br-cadet_blue">
<button class="sw_btn">Split Button</button>
<button class="sw_btn sw_dropdown-trigger"></button>
<ul class="sw_dropdown-content">
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu1</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu2</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu3</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu4</a></li>
<li><a href="javascript:void(0);" class="sw_dropdown-menu">Split menu5</a></li>
</ul>
</div>
To create a cluster of buttons in horizontal display, add .sw_cluster to the class attribute of the parent element of the buttons, mostly a div tag
<div class="sw_cluster">
<button class="sw_btn">Cluster One</button>
<button class="sw_btn bg-peach_amber">Cluster Two</button>
<button class="sw_btn">Cluster Three</button>
<button class="sw_btn bg-dark_salmon">Cluster four</button>
<button class="sw_btn">Cluster five</button>
</div>
Support us to contribute to the continuous development of Swavy UI and other open source software.
SPONSOR