Skip to main content

Advanced Button

Examples

Types of Button

After Turning on Blocks from Grigora's Kit Dashboard.

We can use Advanced Button Block in Editor from Toggle Block Inserter.

Insert Advanced Button from Blocks.

Once Button is inserted, select the Button.

Now Go to Button block settings, in block settings we see bunch of settings and we'll be exploring them one by one.

Typography

Size: Size changes button font size by Dragging Slider Back and Forth.

  • Minimum Value 0px
  • Maximum Value 100px
  • Default Value 16px

Line Height: Line Height adds the space between lines by Dragging Slider Back and Forth.

  • Minimum Value 10px
  • Maximum Value 300px
  • Default Value 10px

Letter Spacing: Letter Spacing adds the space between letters by Dragging Slider Back and Forth.

  • Minimum Value 0px
  • Maximum Value 150px
  • Default Value 0px

Word Spacing: Word Spacing adds the space between words by Dragging Slider Back and Forth.

  • Minimum Value 0px
  • Maximum Value 150px
  • Default Value 0px

Transform: Transform font to Uppercase (All Letters Capital), Lowercase (All letters small) and Capitalize (First letter of word is capital).

Style: Text can be styled in a variety of ways here.

Decoration: Text decoration applies decoration to text like Overline(Adds line above text), Line Through(Adds line through text), Underline(Adds line Below text), Underline OverLine(Adds line Above and Below text).

Weight: Weight adds text weights ranging from 100 to 900.

Note: We can reset the modified value to default by clicking reset button.

Color, Border & Effects

Normal

Colors

  • Text: Text changes color of text in button. We get two options to choose colors i.e. ColorPicker and Color Palette.
  • Background: Background changes Background color of button and we get two options to choose colors i.e. ColorPicker and Color Palette. We aslo get a Gradient Background to use it we have to enable it. In Gradient Background we can set its type i.e. linear or radial and we we can set angle.

Border

  • Width :Adds a border to button and it can be applied in three different styles: solid, dashed, and dotted where width of the border can be modified. By clicking on Unlink sides we can apply border to any particular side. The colour of the border can also be modified using the colour picker.
    • Minimum value is 0px.
    • Maximum value is 100px.
    • Default value is 0px.
  • Radius : Under Radius we can also change border radius. By clicking on Unlink sides we can change radius of any particular side.
    • Minimum value is 0px.
    • Maximum value is 100px.
    • Default value is 4px.

Box Shadow

Box Shadow casts a shadow across the Button.

  • Color : Box shadow color can be changed using the Colorpicker or Color Palette.
  • Blur : Box shadow can be blurred with Blur effect. Value entered uses pixels as its unit.
  • Horizontal : Box shadow can be applied Horizontally. Value entered uses pixels as its unit.
  • Vertical : Box shadow can be applied Vertically. Value entered uses pixels as its unit.

Transforms

  • Rotate : Button can be rotated in the x, y, and z axis.
  • Skew : Skew tilts the button in x axis and y axis.
  • Offset : Offset moves the button in the x and y - axis.
  • Scale : Button's scale can be increased or decreased using Scale.

Note: We can reset the modified value to default by clicking reset button.

Hover

Animation

Hover animations for buttons in the Attention Seekers section.Transition time can also be used to set the duration of animations.

Colors

  • Text : On hover, the text changes color. ColorPicker and Color Palette are the two alternatives for selecting colours.
  • Background : On hover, the background changes colour, and we have two colour selection options: Colorpicker and Color Palette. We also get a Gradient Background, which must be enabled before we can use it. Gradient Background allows us to choose  linear or radial, as well as its angles can be changed.

Border

  • Width :On hover, Adds a border to button and it can be applied in three different styles: solid, dashed, and dotted where width of the border can be modified. By clicking on Unlink sides we can apply border to any particular side. The colour of the border can also be modified using the colour picker.
    • Minimum value is 0px.
    • Maximum value is 100px.
    • Default value is 0px.
  • Radius : Under Radius we can also change border radius. By clicking on Unlink sides we can change radius of any particular side.
    • Minimum value is 0px.
    • Maximum value is 100px.
    • Default value is 4px.

Box Shadow

On hover, Box Shadow casts a shadow across the Button.

  • Color : Box shadow color can be changed using the Colorpicker or Color Palette.
  • Blur : Box shadow can be blurred with Blur effect. Value entered uses pixels as its unit.
  • Horizontal : Box shadow can be applied Horizontally. Value entered uses pixels as its unit.
  • Vertical : Box shadow can be applied Vertically. Value entered uses pixels as its unit.

Transforms

  • Rotate : Button can be rotated in the x, y, and z axis. Entered value has degree as unit.
  • Skew : Skew tilts the Button in x axis and y axis. Value entered uses as its unit.
  • Offset : Offset shifts the Button in x axis and y axis. Value entered uses pixels as its unit..
  • Scale : Scale increases or decreases the scale of Button. Here value can be changed from 0 to 2.

Note: We can reset the modified value to default by clicking reset button.

Text Shadow

(Note : To use Text Shadow we need to enable it)

  • Color :In text shadow we can change Text Color using Color Picker or Color Palette.
  • Blur : Text shadow can be blurred with Blur effect. Value entered uses pixels as its unit.
  • Horizontal : Text shadow can be applied Horizontally. Value entered uses pixels as its unit.
  • Vertical : Text shadow can be applied Vertically. Value entered uses pixels as its unit.

Layout

Padding : Padding can be applied to the button. We can also apply padding to specific sides by clicking on unlink sides.

Icon

  • Select Icon : By selecting icons, we can add an icon to a button. We get dozens of new icons.
  • Size : Under the Size section, we can modify the size of the icon. The unit of measurement for the entered value is pixel.
  • Postion : Postion of icon can also be changed from left to right under Position section.
  • Padding : Padding can also be applied mixed and individually. Entered value has pixel as unit.
  • Color : Color of the icon can be changed by enabling color toggle. We can apply normal color as well as Hover effect color using Color Picker and Color palette

On Scroll

We can apply On Scroll effect to button by selecting from animations. And the time of animations can also be changed.

Note: Enabling this enqueues a animation.min.css and animate.js to enable animations. Although, this may not impact on your speed but its good to know why these files were enqueued.