Animated Button
A button with a rolling text hover effect, an animated arrow, and Solid, Outline, Glass, or Text styles.
Animated Button is a button element with four styles (Solid, Outline, Glass, and Text), an optional animated arrow, and a text roll hover effect. Colors left empty can pick white or near black automatically, whichever reads better against them.
Add it
In WPBakery, click Add Element and pick Animated Button from the Highend Shortcodes category. Or use the shortcode. See Shortcode.
Settings
Get startedtextThe button's caption.
linkWhere the button links to.
Same windowtargetOptions: Same window, New window.
SolidstyleOptions: Solid, Outline, Glass (semi-transparent with a blurred backdrop), Text (no background, for large call-to-action links). Set the colors in the Colors tab.
20glass_opacityHow much of the color shows, from 0 to 100. Only shown when Style is Glass.
12glass_blurBlur of what's behind the button, in pixels. Only shown when Style is Glass.
MediumsizeOptions: Extra small, Small, Medium, Large. Sets the starting padding and font size; change them in the Typography tab.
Fit the textwidthOptions: Fit the text, Full width.
Text rollhoverOptions: Text roll, None.
NonearrowAn arrow that animates on hover. Options: None, Line before the text, Circle after the text, Plus after the text (spins on hover).
NoneunderlineOptions: None, On hover (draws in, slides out), Always (there all the time, slides away to the right on hover and grows back from the left once the pointer leaves). Only shown when Style is Text.
underline_widthIn pixels. Leave empty to scale it with the text size. Only shown when Underline isn't None.
LeftalignOptions: Left, Center, Right.
radiusIn pixels. Enter 0 for square corners. Leave empty for fully rounded ends.
Roundcorner_shapeHow rounded corners are drawn. Options: Round, Squircle, Soft squircle, Bevel (cut corners), Scoop (inward curve), Notch (inward square). Browsers without corner shape support show normal rounded corners.
Colors tab
colorBackground of a solid button, border and text of an outline button, tint of a glass button, text of a text button. Leave empty for the accent color (a text button uses the surrounding text color).
text_colorLeave empty for white or dark text, whichever reads better on the color.
hover_colorBackground on hover, or the color a text button rolls into. Leave empty to use Color.
hover_text_colorLeave empty for white or dark text, whichever reads better on the hover color.
circle_colorLeave empty to pick it automatically. Only shown when Arrow is Circle after the text.
circle_arrow_colorLeave empty to pick it automatically. Only shown when Arrow is Circle after the text.
hover_circle_colorLeave empty to pick it automatically. Only shown when Arrow is Circle after the text.
hover_circle_arrow_colorLeave empty to pick it automatically. Only shown when Arrow is Circle after the text.
Leave Text Color, Circle Color, or Circle Arrow Color empty, and that piece picks white or near black for you, whichever reads better against the color behind it. This needs a browser with CSS relative color support.
Typography tab
Yesuse_theme_fontsUses the theme's font instead of the Google font below.
google_fontsPick a Google font. Only shown when Use Theme Font is off.
font_sizeIn pixels. Leave empty to use the font size of the chosen Size.
font_size_phoneIn pixels. The size scales smoothly from this size on phones to Font Size on desktops. Leave empty to pick it automatically when Fluid Typography is on in Highend Options > Typography.
Defaultfont_weightOptions: Default, 300, 400, 500, 600, 700, 800.
letter_spacingIn em, relative to the font size, for example -0.02 or 0.05.
Defaulttext_transformOptions: Default, None, Uppercase, Lowercase, Capitalize.
Common settings
Animated Button also has Entrance Animation, Entrance Delay, and Extra class name fields. See the Elements overview.
Shortcode
[hb_animated_button text="Get started" link="/contact/" style="outline" arrow="circle" color="#161514"]