{"title":"Adding a Button between the Content","id":36965,"link":"https:\/\/env.averta.net\/en\/step\/adding-a-button-between-the-content\/","parent":[37142],"content":"

Use Button<\/strong> shortcode to create various kinds of buttons. You can add the button shortcode, select your desire style, then fill in its attributes. Available options will be explained below.<\/p>\n

Normal<\/strong><\/h4>\n
[aux_button label=\"Button\" size=\"medium\" icon_align=\"left\" color_name=\"dark-gray\" border=\"\" style=\"\" icon=\"fa fa-beer\" link=\"\" target=\"_blank\"]<\/pre>\n
3D<\/strong><\/h4>\n
[aux_button label=\"Button\" size=\"medium\" icon_align=\"left\" color_name=\"dark-gray\" border=\"\" style=\"3d\" icon=\"fa fa-beer\" link=\"\" target=\"_blank\"]<\/pre>\n
Outline<\/strong><\/h4>\n
[aux_button label=\"Button\" size=\"medium\" icon_align=\"left\" color_name=\"dark-gray\" border=\"\" style=\"outline\" icon=\"fa fa-beer\" link=\"\" target=\"_blank\"]<\/pre>\n
Recommended: <\/strong>To see the demos of Button<\/strong>, check out this link<\/a>.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OPTION<\/th>\nDEFAULT VALUE<\/th>\nVALUES AND DESCRIPTION<\/th>\nDemo<\/th>\n<\/tr>\n
label<\/td>\n“Button”<\/td>\nThe written name appears on the button.<\/td>\n<\/td>\n<\/tr>\n
color_name<\/td>\n“dark-gray”<\/td>\nTo see all available colors on Phlox button, check out this page<\/a>.<\/td>\n\"color3\"?\"color4\"?\"color5\"?\"color6\"?\"color7\"?\"color8\"<\/td>\n<\/tr>\n
size<\/td>\n“medium”<\/td>\nSpecifies the button size.<\/p>\n
“exlarge”<\/p>\n
“large”<\/p>\n
“medium”<\/p>\n
“small”<\/p>\n
“tiny”<\/td>\n
\"exlarge\"<\/p>\n
\"large\"<\/p>\n
\"medium\"<\/p>\n
\"small\"<\/p>\n
\"tiny\"<\/td>\n<\/tr>\n
border<\/td>\n” “<\/td>\nChanges the border of the button.<\/p>\n
” “: Box<\/p>\n
“round”<\/p>\n
“curve”<\/td>\n
\"box\"<\/p>\n
\"round\"<\/p>\n
\"\"<\/td>\n<\/tr>\n
icon_align<\/td>\n“left”<\/td>\nAligns the icon of the button.<\/p>\n
“left”<\/p>\n
“right”<\/p>\n
“over”<\/p>\n
“left-animate”: Animate from left<\/p>\n
“right-animate”: Animate from right<\/td>\n
\"left-icon\"<\/p>\n
\"right-icon\"<\/p>\n
\"animate-over\"<\/p>\n
\"animate-left\"<\/p>\n
\"animate-right\"<\/td>\n<\/tr>\n
style<\/td>\n” “<\/td>\nChanges the button style.<\/p>\n
” “: Normal<\/p>\n
“3d”<\/p>\n
“outline”<\/td>\n
?\"normal\"<\/p>\n
\"3d\"<\/p>\n
\"outline\"<\/td>\n<\/tr>\n
icon<\/td>\n“fa fa-beer”<\/td>\nLets you choose any icon you want. Check out the list of icons here<\/a>.<\/td>\n<\/td>\n<\/tr>\n
link<\/td>\n“title”<\/td>\nLinks the button to another web page.<\/td>\n<\/td>\n<\/tr>\n
target<\/td>\n“_blank”<\/td>\n“_blank”:?Open link in a new page<\/p>\n
“_self”: Open link in current page<\/td>\n
<\/td>\n<\/tr>\n
extra_classes<\/td>\n” “<\/td>\nAdd your custom CSS class names?here, to style particular content element differently.<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","type":"solution"}