+

Buttons






Buttons are the necessary part for your web templates and themes. PixelzUI provides thirty-one classes for buttons. Each button has common .btn class. Classes start from .btn-a to .btn-z for buttons' sizing. However, .btn-exp, .btn-psh, .btn-srnd & .btn-rnd are used for buttons' styling.

Types

Following are the five types of buttons.
  1. Square
  2. Semi-rounded
  3. Rounded
  4. Expanded
  5. Push
=>Other types are based on button size & color classes.

Classes

Following are the classes to use buttons in your scripts.

  1. .btn
  2. .btn-srnd
  3. .btn-rnd
  4. .btn-exp
  5. .btn-psh
  6. .btn-a
  7. .btn-b
  8. .btn-c
  9. .btn-d
  10. .btn-e
  11. .btn-f
  12. .btn-g
  13. .btn-h
  14. .btn-i
  15. .btn-j
  16. .btn-k
  17. .btn-l
  18. .btn-m
  19. .btn-n
  20. .btn-o
  21. .btn-p
  22. .btn-q
  23. .btn-r
  24. .btn-s
  25. .btn-t
  26. .btn-u
  27. .btn-v
  28. .btn-w
  29. .btn-x
  30. .btn-y
  31. .btn-z
.
=>Other classes are based on color classes.

How to use

  1. Add .btn as class attribute in <button>, <input> or <a>.
  2. <button class="btn"><button>
  3. Add .btn-* as an extra class attribute in <button>, <input> or <a> for button sizing.
  4. <button class="btn btn-*"><button>
  5. Add .btn-# as an extra class attribute in <button>, <input> or <a> for button styles.
  6. <button class="btn btn-* btn-#"><button>
  7. Add color classes in <button>, <input> and <a>.
  8. <button class="btn btn-* btn-# bg-bl t-wt br-wt"><button>
=>* means (a - z).

=># means (srnd, rnd, exp & psh).

Demo

Square Buttons





















































.
.
.
Semi-rounded Buttons





















































.
.
.
Rounded Buttons





















































.
.
.
Square Expanded Buttons





















































.
.
.
Semi-rounded Expanded Buttons





















































.
.
.
Rounded Expanded Buttons





















































.
.
.
Square Push Buttons





















































.
.
.
Semi-rounded Push Buttons





















































.
.
.
Rounded Push Buttons





















































.
.
.
Square Expanded Push Buttons





















































.
.
.
Semi-rounded Expanded Push Buttons





















































.
.
.
Rounded Expanded Push Buttons





















































.
.
.

Editing

You can make or modify buttons and anchor buttons of your own choice by using this editor.

  1. Select background color from first color picker.
  2. Select foreground color from second color picker.
  3. Select border color from third color picker.
  4. Select button size from first range slider.
  5. Select button style from second range slider.
  6. Check expanded button from first toggle button.
  7. Check push button from second toggle button.
  8. See the effect in dummy button and HTML code.
  9. Copy that HTML code and place it in your script.

Background Color

Foreground Color

Border Color

Button Size

Button Shape

Square Semi-rounded Rounded

Button Style

Expanded Push



HTML



Leave a Reply

Your email address will not be published. Required fields are marked.