Astra Button Presets Tutorial: Quickly Create Uniformly Beautiful Buttons

buttonsStyle plays an important part in web design, and whether or not the visual style is coordinated can often be seen from a single button.Astra The theme offers a very useful feature - theButton Presets(Button Presets), you can apply a unified button design for the whole site with one click, suitable for any type of website style.

This article describes the types of button presets, their basic operation, and the styling capabilities of the "Secondary" buttons in the new version of Astra.

Button Presets Overview

Astra Two base button types are provided, each supporting three different corner style combinations for a total of six presets:

typology	corner style	instructions
solid button	cusp	Square and hard feeling
	semi-circular angle	Slightly rounded, medium shape
	rounded corner	Soft, stylish feel
Transparent buttons	cusp	Stroke is crisp and clean
	semi-circular angle	Neutral style, commonly used on e-commerce pages
	rounded corner	Visual lightness for creative websites

All of the above styles can be selected directly in the Astra Customizer and will override the default button appearance for the entire site when applied.

procedure

The process of enabling button presets is very intuitive:

• log in WordPress the area behind a theatrical stage
• Go to "Appearance > Customize".

• Click on "Global > Buttons".

• Optional button preset styles appear at the top of the page

• Select a style, save and publish changes

Button styles will be synchronized to all default buttons on the whole site, no need to modify them one by one.

Style detail settings

In addition to quickly switching button styles, various visual parameters can be adjusted to fit the overall style of the page:

• color: Support for modifying text color, background color, border color (including regular and hover state)

• calligraphic style: Setting font family, font weight, font size, case style, etc.

• inner margin: Distance between button text and border
• Border width: Edge line thickness adjustment
• radius of a rounded corner: Smoothness of button corners

The above settings are centered in the "Global > Buttons" area, which allows you to flexibly adjust and preview the effect.

Secondary Button Style Individual Setting

In previous versions, the solid and stroke buttons used the same set of settings. Since Astra As of 4.4.0, button styles are organized into two tabs, "Primary" and "Secondary", giving independent control over the styles of the stroke buttons.

The Secondary button can be set individually.calligraphic styleOptions such as color, corners and margins bring greater design freedom.

Setting up the entrance:
"exterior condition > customizable > Global > Buttons > Secondary"

Method of creating a stroke button

To insert a stroke style button, refer to the following steps:

• go intoweb pageor article editor

• Add a button element

• Set the button style to "Outline".

• Stroke style will be automatically rendered on the page

• Go to the Secondary field in the customizer to further adjust the style

common problems

Q. old version Astra Are button presets supported?
A. Support. Button styling functionality is still available in older versions, except that the Secondary button does not have a separate control option.

Q. Is there support for using custom styles for individual buttons?
A. Support. Button modules inserted within a page support localized settings that can override global styles.

summarize

Astra The button presets provided are perfect for unifying site styles, easy to use and highly scalable. Through various functions, the main button and stroke button can be controlled separately, further enhancing the aesthetics and flexibility of the page.

This feature is suitable for those who are building an e-commerce site, brand website or personalblog (loanword)users. If the Astra Pro plugin, which also unlocks more advanced button styles and dynamic effects.

Related articles

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off