CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Definition

Button is a clickable html element that responses with action when called. Button is best represented as an hypertext anchor link a and button (element labeled by its contents associated with a global attribute of type, where type is button, reset, and submit ).

Plugin Class

Classes Property
btnPress Sleek press feel
btnFloated Floating top and bottom when pressed
btnRipple Activate with a ripple effect.
btnExpand Expand in length when mouse over
btnIcon Embeds with icon.
btnHover Cascade down with hidden icon when mouse over.

Common Buttons

Input button


  
  <input type="button" class="button border-all-xxs" value="Input Button" />

Button button


  
  <button type="button" class="button border-all-xxs">Button</button>

Hypertext Link button

Link Button
 
  <a href="#" class="button border-all-xxs">Link Button</a>

Button Group

Floated button


 
     <button type="button" class="button btnFloated color-set-alizarinCrimson">Button </button>

Pressed button


 
     <button type="button" class="button btnPress color-set-jagua">Button </button>

Hover button


 
     <button type="button" class="button btnHover color-set-jagua">Button </button>

Icon button


 
     <button type="button" class="button btnIcon icon icon-amazon color-set-ruby">Button </button>

Ripple button


 
     <button type="button" class="button btnRipple color-set-jagua">Button </button>

Flat button


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

Disable button


 
     <button type="button" class="button disabled">Button </button>

Custom Setting

Colored Buttons

Button color property can be changed to different color depending on what part of the element (button) is affected, color may be applied to the foreground (text affected) only, background of the button, or the combination of the text and the button background by assigning a text-color, background-color, color-set respectively.

 
     <button type="button" class="button color-set-alizarinCrimson">Button </button>

Button Shapes

Button shape takes advantage of the shape class to simulate rounded, circle and square shape.


 
         <!-- button + color + icon + shape class  -->
     <button type="button" class="button color-set-abbey square">Button </button>
         <!-- button + color + icon + shape class  -->
     <button type="button" class="button color-set-acapulo icon icon-cross circle ">Button </button>
         <!-- button + color + icon + shape class  -->
     <button type="button" class="button color-set-alizarinCrimson round">Button </button>

Button Hover

Hover state effect is employed using the hover-state class by assigning it to the class attribute. This effect, when applied and hovered changes the button theme such as the text or the background.


 
     <button type="button" class="button color-set-alizarinCrimson hover-set-jaqua">Button </button>

But note, in order to experience a captivating hover state effect for button, the category of color class selected must change hand. If color-text-yellow is assigned to the text content and invariably mark its corresponding hover text as hover-text-yellow, changes of such property might NOT be conspicuous and clearly visible when hovered.

Button Styles

Giving a new visual look to button is a great choice, the style such as text shadow, border and so on may be applied to the embedding text


 
     <button type="button" class="button border-all-xxs">Button </button>


 
     <button type="button" class="button style-italic">Button </button>


 
     <button type="button" class="button text-shadow-emboss2">Button </button>

Button Size

Button size is scalable by increasing or decreasing the font-size with the aid of size class identifies by xxsmall xsmall small normal medium large e.t.c.


 
     <button type="button" class="button  small">Small Button </button>


 
     <button type="button" class="button normal">Regular Button </button>


 
     <button type="button" class="button  medium">Medium Button </button>


 
     <button type="button" class="button large">Large Button </button>

Browser Supports

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.