AFLIKSOFT https://www.afliksoft.com/p/button.html

Button

Default button class is btn. Buttons class work in HTML tag, example: a, button, input, etc.



Default button

White is default button color.


<button class="btn">Button</button>


Ripple

With JavaScript the button automatic adding class js-ripple to enable ripple. We make the ripple with 100% pure JavaScript (Vanilla JS).

Components that include the ripple is:

  • Button
  • Toolbar action
  • Drawer menu
  • Dropdown menu
  • Accordion

If you want to add more ripple to other block element please add js-ripple class.

Below is an options for the ripple.


No Ripple

The button without ripple.


<button class="btn no-ripple">Button</button>

Ripple Color

The ripple color using CSS currentColor. If you want to use other color, please use data-ripple-color.


<button class="btn" data-ripple-color="#00bcd4">Button</button>

Ripple Opacity

Default CSS opacity the ripple is 0.4. If you want to use other values, please use data-ripple-opacity.


<button class="btn" data-ripple-opacity="0.8">Button</button>

Ripple Radius

Default CSS border-radius the ripple is 50%. If you want to use other values, please use data-ripple-radius.


<button class="btn" data-ripple-radius="20%">Button</button>



Tags

Note: The ripple not working on input.

Link

<a href="#" class="btn">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input"/>
<input class="btn" type="submit" value="Submit"/>
<input class="btn" type="reset" value="Reset"/>
<input class="btn-upload" type="file" id="file"/>
<label for="file" class="btn" role="button">Upload</label>


Colors

The button colors like a Bootstrap or Bulma.



<button class="btn btn-dark">Button Dark</button>
<button class="btn btn-light">Button Light</button>
<button class="btn btn-primary">Button Primary</button>
<button class="btn btn-secondary">Button Secondary</button>

<button class="btn btn-info">Button Info</button>
<button class="btn btn-warning">Button Warning</button>
<button class="btn btn-danger">Button Danger</button>
<button class="btn btn-success">Button Success</button>


FAB (Floating Action Button)

FAB (Floating Action Button) will work if using the default class and combined with btn-fab.


<button class="btn btn-fab"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
<button class="btn btn-fab btn-primary"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
<button class="btn btn-fab btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button>


Sizes

The button sizes available only small, medium (default) and large.




<button class="btn btn-small btn-primary">Button Small</button>
<button class="btn btn btn-primary">Button Default Size</button>
<button class="btn btn-large btn-primary">Button Large</button>

<button class="btn btn-fab btn-small btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
<button class="btn btn-fab btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button>
<button class="btn btn-fab btn-large btn-secondary"><i aria-hidden="true" class="mdi mdi-plus"></i></button>


Flat

Flat button will work if using the default class and combined with btn-flat.


<button class="btn btn-flat">Button</button>
<button class="btn btn-flat btn-primary">Button Primary</button>
<button class="btn btn-flat btn-secondary">Button Secondary</button>


Raised

Raised button will work if using the default class and combined with btn-raised.


<button class="btn btn-raised">Button</button><button class="btn btn-raised btn-primary">Button Primary</button>
<button class="btn btn-raised btn-secondary">Button Secondary</button>


Outline

Outline button will work if using the default class and combined with btn-flat and btn-outline.



<button class="btn btn-flat btn-outline">Button</button>
<button class="btn btn-flat btn-outline btn-primary">Button Primary</button>
<button class="btn btn-flat btn-outline btn-secondary">Button Secondary</button>

<button class="btn btn-flat btn-outline btn-info">Button Info</button>
<button class="btn btn-flat btn-outline btn-warning">Button Warning</button>
<button class="btn btn-flat btn-outline btn-danger">Button Danger</button>
<button class="btn btn-flat btn-outline btn-success">Button Success</button>


Gradient

Gradient button color only Primary and Secondary.


<button class="btn btn-gradient btn-gradient-primary">Button Primary</button>
<button class="btn btn-gradient btn-gradient-secondary">Button Secondary</button>


Round

Round button will work if using the default class and combined with btn-round.


<button class="btn btn-round btn-raised btn-secondary">Button Round</button>


Center


<div class="btn-center">
    <button class="btn btn-raised btn-secondary">Button Center</button>
</div>


Button full width


<button class="btn btn-block btn-raised btn-secondary">Button Full Width</button>


Icons

Combination the button with Material Design Icons.

Right icons




<button class="btn btn-raised btn-success">Button Download<i aria-hidden="true" class="icon-right mdi mdi-cloud-download"></i></button>
<button class="btn btn-raised btn-warning">Button Send<i aria-hidden="true" class="icon-right mdi mdi-send"></i></button>
<button class="btn btn-raised btn-secondary">Button Home<i aria-hidden="true" class="icon-right mdi mdi-home"></i></button>

<button class="btn btn-raised btn-dark">Button GitHub<i aria-hidden="true" class="icon-right mdi mdi-github-circle"></i></button>
<button class="btn btn-raised btn-dark">Button Codepen<i aria-hidden="true" class="icon-right mdi mdi-codepen"></i></button>
<button class="btn btn-raised btn-dark">Button Document<i aria-hidden="true" class="icon-right mdi mdi-file-document-box"></i></button>

<button class="btn btn-raised btn-success btn-small">Button Download<i aria-hidden="true" class="icon-right mdi mdi-cloud-download"></i></button>
<button class="btn btn-raised btn-warning btn-large">Button Send<i aria-hidden="true" class="icon-right mdi mdi-send"></i></button>

Left icons




<button class="btn btn-raised btn-success"><i aria-hidden="true" class="icon-left mdi mdi-cloud-download"></i>Button Download</button>
<button class="btn btn-raised btn-warning"><i aria-hidden="true" class="icon-left mdi mdi-send"></i>Button Send</button>
<button class="btn btn-raised btn-secondary"><i aria-hidden="true" class="icon-left mdi mdi-home"></i>Button Home</button>

<button class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-github-circle"></i>Button GitHub</button>
<button class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-codepen"></i>Button Codepen</button>
<button class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-file-document-box"></i>Button Document</button>

<button class="btn btn-raised btn-success btn-small"><i aria-hidden="true" class="icon-left mdi mdi-cloud-download"></i>Button Download</button>
<button class="btn btn-raised btn-warning btn-large"><i aria-hidden="true" class="icon-left mdi mdi-send"></i>Button Send</button>


Disabled

The button with HTML disabled Attribute.


<button class="btn btn-large" disabled="disabled">Button</button>
<button class="btn" disabled="disabled">Button</button>
<button class="btn btn-flat" disabled="disabled">Button</button>
<button class="btn btn-flat btn-outline" disabled="disabled">Button</button>
<button class="btn btn-fab" disabled="disabled"><i aria-hidden="true" class="mdi mdi-plus"></i></button>


Customize

Customize the button for a posts.


<div class="btn-wrap">
    <div class="btn-center">
        <a href="#" class="btn btn-raised btn-secondary"><i aria-hidden="true" class="icon-left mdi mdi-eye"></i>Demo</a>
        <a href="#" class="btn btn-raised btn-primary"><i aria-hidden="true" class="icon-left mdi mdi-cloud-download"></i>Download</a>
        <a href="#" class="btn btn-raised btn-dark"><i aria-hidden="true" class="icon-left mdi mdi-file-document-box"></i>Document</a>
        <a href="#" class="btn btn-raised btn-success"><i aria-hidden="true" class="icon-left mdi mdi-cart"></i>Buy</a>
    </div>
</div>

Comment disabled

Notification