Jelly Button

Thunder Pack addon stack

Super stylistic buttons with a lot of depth and personality that you can easily customize to match your page’s contents. Bring depth and design back into your site.

  • Create highly stylized buttons, or created you own custom designs.
  • Include and customize icons on your buttons.
  • Opt to add a pulsating animation to your button.
  • Use gradients and specialized shaodw controls to add depth back to your designs.
  • Set button alignment on a per-breakpoint basis.

Example

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Using Jelly Button

General

Remove Base Margin
This setting lets you disable the preset standard spacing that is applied to the bottom of the stack.

Link
Set the link for your button, whether to an internal page or an external site.

Label
Allows you to customize the text that resides on your Jelly Button.

Font
Choose whether to have your header adopt the font settings from the Control Center stack or to use the Typeface stack for your font choices.

The default values and settings for headers on your page can be setup within the Foundry Control Center stack. There you can set font sizes, weights, colors and more.

Font Weight
Choose what weight you wish your font to be. The higher the number the more bold the font will be. If using the Typeface stack for your font choice be sure that you are loading the font weight you wish to use within the Typeface stack.

Size
Choose the size of your button. You can opt for a Small, Standard or Large button size.

Alignment
Allows you to set the justification of the button. You can set the alignment to Left, Center or Right. You also have the option of setting the alignment of your header differently at each of the three breakpoints.

Block Button
Enable to make the button span the entire width of its parent stack. The button’s width is flexible when enabled and will size down to fit the available space.

Style

Text
Allows you to set the color of your buttons text and that text’s own shadow.

Gradient
Allows you to customize the gradient colors for your button.

Icon

Icon
Enabling this feature allows you to include an icon on your button in addition to your button’s label text.

Icon Type
A drop down containing a large list of icon for you to choose from for your button.

Icon Colors
Allows you to customize the icon and icon background color for you button.

Shadow

Type
Allows you to choose whether you want to use a normal plain looking shadow, or use the Jelly Buttons special shadow which lets you inherit its colors from the button itself. If you’re not in need of a shadow you can also choose to remove it.

Shadow Style
When using the Jelly Button shadow type you can choose whether to inherit the buttons styling for the shadow or to use a more standard shadow style.

When using the Plain shadow type you will be give an array of different color pickers to set and style your own shadow manually.

Animation

Pulse
You can opt to add a pulsating animation to your button by enabling this feature.

Advanced

Tooltip
Add a popup tooltip to your button. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!