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.

Default 


 <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;
}

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