Buttons
Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
Link
<a href="#" class="btn primary" role="button">Link</a>
<button class="btn primary">Button</button>
<input type="button" class="btn primary" value="Input" />
<input type="submit" class="btn primary" value="Submit" />
<input type="reset" class="btn primary" value="Reset" />
<button class="link">Link</button>
Note: We recommend only the use of Button tag.
Tooltip
<button class="btn primary tooltip top" title="My Tooltip is top">Tooltip top</button>
<button class="btn primary tooltip right" title="My Tooltip is right">Tooltip right</button>
<button class="btn primary tooltip left" title="My Tooltip is left">Tooltip left</button>
<button class="btn primary tooltip bottom" title="My Tooltip is bottom">Tooltip bottom</button>
Addclass="no-point"
to remove the arrow of tooltip.
Buttons variations
Neptune has many buttons for different actions.
Link
<button class="btn">Default</button>
<button class="btn primary">Primary</button>
<button class="btn warning">Warning</button>
<button class="btn secondary">Secondary</button>
<button class="btn danger">Danger</button>
<button class="btn inverse">Inverse</button>
<a href="#">Link</a>
Button effects
An opacity effect to feel the click.
add class="has-effect"
to the Button tag to see a light effect when clicks.
<button class="btn has-effect">Default</button>
<button class="btn primary has-effect">Primary</button>
<button class="btn warning has-effect">Warning</button>
<button class="btn secondary has-effect">Secondary</button>
<button class="btn danger has-effect">Danger</button>
<button class="btn inverse has-effect">Inverse</button>
Disabled buttons
Make buttons look inactive by adding the disabled boolean attribute to any .btn
element. <a>
don’t support the disabled attribute, so you must add the .is-disabled
class to make it visually appear disabled.
add disabled
attribute to make buttons inactive.
<a href="#" class="btn is-disabled">Default</a>
<button class="btn primary" disabled="disabled">Primary</button>
<button class="btn warning" disabled="disabled">Warning</button>
<button class="btn secondary" disabled="disabled">Secondary</button>
<button class="btn danger" disabled="disabled">Danger</button>
<button class="btn inverse" disabled="disabled">Inverse</button>
Button Size
add class="lg"
or class="sm"
for additional sizes.
<button class="btn lg">Large Button</button>
<button class="btn primary large">Large Button</button>
<button class="btn sm">Small Button</button>
<button class="btn primary small">Small Button</button>
Create block level buttons—those that span the full width of a parent—by adding class="block"
.
<button class="btn block">Small Button</button>
<button class="btn primary block">Small Button</button>
Customize
Use this selector to customize Buttons
.btn {
background-color: #6495ed;
color: #fff;
}
Dropdown Button
A button with a set of hidden options.
<label for="countries" class="btn dropdown">
Countries
<input type="checkbox" id="countries">
<ul>
<li class='item'><a href="#">Angola</a></li>
<li class='item'><a href="#">Brasil</a></li>
<li class='item'><a href="#">USA</a></li>
</ul>
</label>
Touch Button
A touch button is just a big button. We made to help build "touchable" interfaces.
<button class="btn touch">Touch Button</button>
Issues
Bug or features request ? Open an Issue