Buttons – ABC DE LOS COMPUTADORES

Call Us: +1 203.871.800 [email protected]

CSS Buttons - Shortcode

The buttons shortcode has a lot of options to set. Button shortcode has predefined 5 sizes (mini, small, medium, large and extra large) with 5 different shapes (flat, round, pill, shield & skew).

Get in Touch

Get a Free Quote

Customer Support

Buttons

Home / Buttons

Mini Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.

Button

Small Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Button

Medium Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Medium Button

Large Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ncididunt ut labore et dolore magna.

Large Button

Extra Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Extra Large

Stylish Button Shapes

5 Different Shapes

Bravio Buttons are truly made with love, giving you tons of options to make stylish buttons according to latest web trends with pure CSS.They are cross browser and look awesome on all major browsers.

Flat Button

Round Button

Pill Button

Shield Button

Skew Button

Cool 3D Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

3D Flat Button

3D Round Button

3D Pill Button

3D Shield Button

3D Skew Button

Gradient 3D Buttons

Gradient 1

Gradient 2

3D Buttons – Border Enabled

By enabling border on any type of buttons the inset (the top white semi transparent border) is automatically enabled, however if you wish you can forcefully set it by by setting inset=’0′, below are a few examples. Text shadow is also enabled in following examples.

3D Buttons – Mouse Roll Over Effect

This cool effect can be enabled by NOT setting one of the 3D bottom border state colors (tdbordercolor, tdborderovercolor), just set it to tdborderovercolor=» or tdbordercolor=». Try using gradient width 3D buttons to achieve amazing button effects.

Border Colors

You can set border active and over state colors. We have added some examples.

Button

Border Size

Border can be set to any type of button. If you set border e.g. border=’1′ the inset (semi transparent top white border) is automatically enabled, turn it off by setting inset=’0′.

NO Border

1px Border

2px Border

3px Border

Any Shape / Size

Border can be applied to all available sizes and shapes without any limit.

1px Border

HOVER Shadows Effect

You can apply this effect to any currently available shapes i.e. Flat, Round, Pill, Shield and Skew.

Drop Shadow

Grow Shadow

Outset Shadow

Inset Shadow

Inset Border & Color

By default inset border is ON if border is set but can be disabled by setting inset=’0′, you can also modify the color of inset border (top white border) by adding a custom color in hex format e.g. inset=’#990000′.

Inset ON

Inset OFF

Inset COLOR

Left / Right Padding & Margins

You can set custom left / right padding for example if you choose ‘medium’ button but want to have custom width then set e.g. lrpadding=’50’. Margin to right can be set with marginright variable e.g. marginright=’10’.

Default Padding

Custom Padding

Text Shadows

Adding a text shadow in buttons makes it more appealing. We have provided an option to turn text shadow ON / OFF. By default text shadow is disabled, however by setting ‘textshdow’ variable to 1 enables text shadow.

Hide Text Shadow

Show Text Shadow

Font Awesome Icons

You may select from 470+ Font Awesome Icons to make it look more appealing.

The Font

Awesome

Icon Active and Over Colors

If you dont set any icon color, it will use the textcolor value, however setting ‘iconcolor’ and ‘iconovercolor’ will change the icon color.

Icon Active Color

Icon Mouseover Color

Both Colors

Icon Position

Bravio also allows you to set icon position before / after text.

The Font

Awesome

Background Transparency

You can set background transparency with combination of any styles.

HOVER 2D Transition Effects

Bravio buttons tons of has built in hover effects to choose from, below are examples of 2D transition hover effects. Set hover=’effectname’ and you are all set.

Wobble to Bottom Right

HOVER Background Transition Effects

Bravio buttons tons of has built in hover effects to choose from, below are examples of background transition hover effects. Set hover=’effectname’ and you are all set.