Theme Elements: Button Elements

‹ See all elements

Element: Button

Creates a colored button

Button Settings

Content › Button

Button Label
This is the text that appears on your button.
Show Button Icon
Should an icon be displayed at the left or right side of the button
Button Icon
Select an icon for your Button below
Icon Visibility
Check to only display icon on hover

Content › Link Settings

Button Link
Where should your button link to?
Open In New Window
Select if you want to open the link in a new window and set additional SEO options

Styling › Appearance

Button Size
Choose the size of your button here.
Button Position
Choose the alignment of your button here
Button Label Display
Select how to display the label
Button Title Attribute
Add a title attribute for this button.

Styling › Font Sizes

Button Title Attribute
Add a title attribute for this button.

Styling › Button Margin And Padding

Button Margin And Padding
Set a responsive margin and a padding to text for the button.

Styling › Colors

Button Colors Selection
Select the available options for button colors. Switching to advanced options for already existing buttons you need to set all options (color settings from basic options are ignored).
Custom Background Color
Select a custom background color for your button here
Custom Font Color
Select a custom font color for your button here
Custom Button Background Color On Hover
Select background color on hover for your button here (translucent and theme colors might not always work properly when using custom border stylings).
Custom Button Font Color
Select font color for your button here
Custom Button Font Color On Hover
Select font color on hover for your button here

Styling › Colors

Button Colors Selection
Select the available options for button colors. Switching to advanced options for already existing buttons you need to set all options (color settings from basic options are ignored).
Button Background Color
Select background color for your button here
- Custom Color
  - Custom Button Background Color
    Select background color for your button here
  - Custom Button Background Color On Hover
    Select background color on hover for your button here
  - Custom Button Font Color
    Select font color for your button here
  - Custom Button Font Color On Hover
    Select font color on hover for your button here
- Gradient Color
  - Background Gradient Direction
    Define the gradient direction for background of the element
  - Gradient Color 1
    Select the first color for the gradient.
  - Gradient Color 2
    Select the second color for the gradient.
  - Gradient Color 3
    Select an optional third color for the gradient.
  - Opacity For Background On Hover
    When using gradient colors it is only possible to select the opacity when you hover over the button.
  - Custom Button Font Color
    Select font color for your button here
  - Custom Button Font Color On Hover
    Select font color on hover for your button here

Styling › Border

Border Style

Choose the border style for your element here
Border Width
Select your border width.
Border Color
Select the border color for this element here.
Border Radius
Select your border radius(e.g. 5px).

Styling › Box Shadow

Box Shadow

Select to add a customized box shadow
Box Shadow Styling
Set the shadow styling values, you can use em or px, negative values move in opposite direction.
Box Shadow Color
Select a shadow color for this element here.

Advanced › Animation

Button Animation

Add a small animation to the button when the user first scrolls to the button position.
Animation Duration
Select how long the animation should last

Advanced › Effects

Opacity On Hover

Select the opacity for the element on hover
Sonar/Pulsate Effect
Select a sonar/pulsate effect for the element.
Sonar Shadow Color
Select the color for the sonar shadow.
Sonar effect duration
Select approx. length of one effect, larger value slows down
Expand Scale
Select the expand value for the sonar effect
Element Opacity
Select the opacity of the element when expanding

Element: Button Row

Displays multiple buttons beside each other

Button Row Settings

Content

Add/Edit Buttons
Here you can add, remove and edit buttons.

Styling › Appearance

Align Buttons
Choose the alignment of your buttons here
Space between buttons
Define the space between the buttons.
Unit
Unit for the spacing

Styling › Font Sizes

Button Text Font Sizes
Select a custom font size for the button text. Used for all buttons, can also be set for each button seperate.

Styling › Padding

Button Text Padding
Set a responsive padding to text for the buttons. Used for all buttons, can also be set for each button seperate.

Individual Button Settings

Content › Button

Button Label
This is the text that appears on your button.
Show Button Icon
Should an icon be displayed at the left or right side of the button
Button Icon
Select an icon for your Button below
Icon Visibility
Check to only display icon on hover

Content › Link Settings

Button Link
Where should your button link to?
Open In New Window
Select if you want to open the link in a new window and set additional SEO options

Styling › Appearance

Button Size
Choose the size of your button here
Button Label Display
Select how to display the label
Button Title Attribute
Add a title attribute for this button.

Styling › Font Sizes

Button Text Font Sizes
Select a custom font size for the button text.

Styling › Padding

Button Padding
Set a responsive padding to text for the button.

Styling › Colors

Button Colors Selection
Select the available options for button colors. Switching to advanced options for already existing buttons you need to set all options (color settings from basic options are ignored).
Button Background Color
Select background color for your button here
- Custom Color
  - Custom Button Background Color
    Select background color for your button here
  - Custom Button Background Color On Hover
    Select background color on hover for your button here
  - Custom Button Font Color
    Select font color for your button here
  - Custom Button Font Color On Hover
    Select font color on hover for your button here
- Gradient Color
  - Background Gradient Direction
    Define the gradient direction for background of the element
  - Gradient Color 1
    Select the first color for the gradient.
  - Gradient Color 2
    Select the second color for the gradient.
  - Gradient Color 3
    Select an optional third color for the gradient.
  - Opacity For Background On Hover
    When using gradient colors it is only possible to select the opacity when you hover over the button.
  - Custom Button Font Color
    Select font color for your button here
  - Custom Button Font Color On Hover
    Select font color on hover for your button here

Styling › Border

Border Style
Choose the border style for your element here
Border Width
Select your border width.
Border Color
Select the border color for this element here.
Border Radius
Select your border radius(e.g. 5px).

Styling › Box Shadow

Box Shadow
Select to add a customized box shadow
Box Shadow Styling
Set the shadow styling values, you can use em or px, negative values move in opposite direction.
Box Shadow Color
Select a shadow color for this element here.

Advanced › Effects

Opacity On Hover
Select the opacity for the element on hover
Sonar/Pulsate Effect
Select a sonar/pulsate effect for the element.
Sonar Shadow Color
Select the color for the sonar shadow.
Sonar effect duration
Select approx. length of one effect, larger value slows down
Expand Scale
Select the expand value for the sonar effect
Element Opacity
Select the opacity of the element when expanding

Small Click me Medium Call to Action Small Click me

Medium Click me Large Call to Action Small Click me

Element: Fullwidth Button

Creates a colored button that stretches across the full width

Fullwidth Button Settings

Content › Button

Button Title
This is the text that appears on your button.
Additional Description Position
Select, where to show an additional description
Additional Description
Enter an additional description
Button Icon
Should an icon be displayed at the left side of the button
Button Icon
Select an icon for your Button below
Icon Visibility
Check to only display icon on hover

Content › Link Settings

Button Link
Where should your button link to?
Open In New Window
Select if you want to open the link in a new window and set additional SEO options

Styling › Font Sizes

Button Text Font Sizes
Select a custom font size for the button text.

Styling › Margin and Padding

Button Margin And Padding
Set a responsive margin and a padding to text for the button.

Styling › Colors

Button Background Color
Select background color for your button here
- Custom Color
  - Custom Button Background Color
    Select background color for your button here
  - Custom Button Background Color On Hover
    Select background color on hover for your button here
  - Custom Button Font Color
    Select font color for your button here
  - Custom Button Font Color On Hover
    Select font color on hover for your button here
- Gradient Color
  - Background Gradient Direction
    Define the gradient direction for background of the element
  - Gradient Color 1
    Select the first color for the gradient.
  - Gradient Color 2
    Select the second color for the gradient.
  - Gradient Color 3
    Select an optional third color for the gradient.
  - Opacity For Background On Hover
    When using gradient colors it is only possible to select the opacity when you hover over the button.
  - Custom Button Font Color
    Select font color for your button here
  - Custom Button Font Color On Hover
    Select font color on hover for your button here

Styling › Border

Border Style
Choose the border style for your element here
Border Width
Select your border width.
Border Color
Select the border color for this element here.
Border Radius
Select your border radius(e.g. 5px).

Styling › Box Shadow

Box Shadow
Select to add a customized box shadow
Box Shadow Styling
Set the shadow styling values, you can use em or px, negative values move in opposite direction.
Box Shadow Color
Select a shadow color for this element here.

Advanced › Effects

Opacity On Hover
Select the opacity for the element on hover
Sonar/Pulsate Effect
Select a sonar/pulsate effect for the element.
Sonar Shadow Color
Select the color for the sonar shadow.
Sonar effect duration
Select approx. length of one effect, larger value slows down
Expand Scale
Select the expand value for the sonar effect
Element Opacity
Select the opacity of the element when expanding

Click me

The UCLA Luskin Center for Innovation acknowledges the Gabrielino/Tongva peoples as the traditional land caretakers of Tovaangar (the Los Angeles basin and So. Channel Islands). As a land grant institution, we pay our respects to the Honuukvetam (Ancestors), ‘Ahiihirom (Elders) and ‘eyoohiinkem (our relatives/relations) past, present and emerging.

Click on the linked words to hear the pronunciation for the Tongva-language words.

3323 Public Affairs Building, Box 951656, Los Angeles, CA 90095-1656
Phone: 310-267-5435 | Fax: 310-267-5443