Default buttons

Here, we showcase the default types of button of UDesign. There are classified by skin color, border type, button's shape and icons.

Button color

These buttons are classified by skin color.

Dark Button
Gray Button
Cyan Button
Green Button
Orange Button
Red Button

Outline1

These buttons are classified by skin color and border type.

Dark Button
Gray Button
Cyan Button
Green Button
Orange Button
Red Button

Outline2

These buttons are classified by skin color and border type.

Dark Button
Gray Button
Cyan Button
Green Button
Orange Button
Red Button

Outline3

These buttons are classified by skin color and border type.

Dark Button
Gray Button
Cyan Button
Green Button
Orange Button
Red Button

Button shape & with icon

These buttons are classified by button's shape and icons.

Rectangle
Rounded
Ellipse
Rectangle
Rounded
Ellipse

Unlimited button styles

UDesign provides several types of button exclusive of default style. You can customize them easily by using styling options. Enjoy!

Text button

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.

View More

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.

View More

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.

View More

Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.

View More

Icon reveal buttons

Button
button
Button
Button
Button
Button

Gradient buttons

Button
Button
Button
Button
Button
button

Block buttons

The width of buttons are controlled by it's parent area.

Rectangle
Ellipse
Rounded

Border control

You can control border width and color of buttons.

1 Px Border
2 Px Border
3 Px Border
4 Px Border
5 Px Border
6 Px Border

Box shadows

You can control box shadow effect of buttons.

Shadow 1
Shadow 2
Shadow 3
Button size

UDesign buttons come in 5 different sizes

UDesign also provides button styles incident to the size. You can make them by choosing from size list.

Button Image
Default Button
Small Button
Medium Button
Large Button
Extra Large Button
Default Button
Small Button
Medium Button
Large Button
Extra Large Button

Glossary

Button element options

Customize Elements Globally or Individually

  • Text: Input text that will be shown on button.
  • Button Url: Input URL where you will move when button is clicked.
  • Expand: Make button’s width 100%.
  • Alignment: Control the button’s alignment.
  • Type: Choose a type of button from our list.
  • Skin: Choose a skin color of button from our list.
  • Size: Choose a size of button from our list.
  • Box Shadow: Choose a box shadow effect for button from our list.
  • Border Style: Choose a border style of button from our list.
  • Text Overflow: Prevent the button text placing in several rows.
  • Custom Class: Input your class for button.
  • Show Icon: Toggle to decide that icon is shown or not.
  • Icon: Choose a icon from our icon library.
  • Icon Position: Control position of icon on button.
  • Icon Spacing: Control spacing between icon and label on button.
  • Icon Hover Effect: Choose an effect of icon when cursor enters the button.
  • Button Style: Styling options for buttons.