Examples #
by adding .n-btn has class you can achieve neumorphic design button.
<button class="n-btn" type="button">Button</button><button class="n-btn" type="button"><i class="mytabworks icon-ship" /> button</button><button class="n-btn" type="button"><i class="mytabworks icon-anchor" /></button>
Button Tags #
The .n-btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements
<button class="n-btn" type="button">Button</button><a class="n-btn" href="#" role="button">Link</a><input class="n-btn" type="button" value="Input" /><input class="n-btn" type="submit" value="Submit" /><input class="n-btn" type="reset" value="Reset" />
Button Sizes #
add .n-btn-sm class to make the button small and add .n-btn-lg class to make the button large
<button className='n-btn n-btn-xs' type='button'>xs</button><button className='n-btn n-btn-sm' type='button'>small</button><button className='n-btn n-btn-lg' type='button'>Large</button>
Active state #
Buttons will appear pressed
<button class="n-btn active" type="button">Button</button><button class="n-btn active" type="button"><i class='mytabworks icon-ship' /> button</button>
Disabled state #
Make buttons look inactive by adding the disabled
<button class="n-btn" type="button" disabled>Button</button><button class="n-btn" type="button" disabled><i class='mytabworks icon-ship' /> button</button>