[
'title' => __('Extra Small'),
'icon' => 'eicon-xs',
],
'sm' => [
'title' => __('Small'),
'icon' => 'eicon-sm',
],
'md' => [
'title' => __('Medium'),
'icon' => 'eicon-md',
],
'lg' => [
'title' => __('Large'),
'icon' => 'eicon-lg',
],
'xl' => [
'title' => __('Extra Large'),
'icon' => 'eicon-xl',
],
];
}
/**
* Register button widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.0.0
*/
protected function _registerControls()
{
$this->startControlsSection(
'section_button',
[
'label' => __('Button'),
]
);
$this->addControl(
'button_type',
[
'label' => __('Type'),
'type' => ControlsManager::SELECT,
'options' => [
'' => __('Default'),
'primary' => __('Primary'),
'secondary' => __('Secondary'),
'info' => __('Info'),
'success' => __('Success'),
'warning' => __('Warning'),
'danger' => __('Danger'),
],
'style_transfer' => true,
'prefix_class' => 'elementor-button-',
]
);
$this->addControl(
'text',
[
'label' => __('Text'),
'type' => ControlsManager::TEXT,
'dynamic' => [
'active' => true,
],
'default' => __('Click here'),
'placeholder' => __('Click here'),
]
);
$this->addControl(
'link',
[
'label' => __('Link'),
'type' => ControlsManager::URL,
'dynamic' => [
'active' => true,
],
'placeholder' => __('https://your-link.com'),
'default' => [
'url' => '#',
],
]
);
$this->addResponsiveControl(
'align',
[
'label' => __('Alignment'),
'type' => ControlsManager::CHOOSE,
'options' => [
'left' => [
'title' => __('Left'),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => __('Center'),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => __('Right'),
'icon' => 'eicon-text-align-right',
],
'justify' => [
'title' => __('Justified'),
'icon' => 'eicon-text-align-justify',
],
],
'prefix_class' => 'elementor%s-align-',
]
);
$this->addControl(
'size',
[
'label' => __('Size'),
'type' => ControlsManager::CHOOSE,
'toggle' => false,
'options' => self::getButtonSizes(),
'default' => 'sm',
'style_transfer' => true,
]
);
$this->addControl(
'selected_icon',
[
'label' => __('Icon'),
'type' => ControlsManager::ICONS,
'fa4compatibility' => 'icon',
]
);
$this->addControl(
'icon_align',
[
'label' => __('Icon Position'),
'type' => ControlsManager::SELECT,
'default' => 'left',
'options' => [
'left' => __('Before'),
'right' => __('After'),
],
'condition' => [
'selected_icon[value]!' => '',
],
]
);
$this->addControl(
'icon_indent',
[
'label' => __('Icon Spacing'),
'type' => ControlsManager::SLIDER,
'range' => [
'px' => [
'max' => 50,
],
],
'selectors' => [
'{{WRAPPER}} .elementor-button-content-wrapper' => 'gap: {{SIZE}}{{UNIT}}',
'{{WRAPPER}} .elementor-button-text' => 'flex-grow: min(0, {{SIZE}})',
],
'condition' => [
'selected_icon[value]!' => '',
],
]
);
$this->addControl(
'view',
[
'label' => __('View'),
'type' => ControlsManager::HIDDEN,
'default' => 'traditional',
]
);
$this->addControl(
'button_css_id',
[
'label' => __('Button ID'),
'type' => ControlsManager::TEXT,
'dynamic' => [
'active' => true,
],
'title' => __('Add your custom id WITHOUT the Pound key. e.g: my-id'),
'description' => __(
'Please make sure the ID is unique and not used elsewhere on the page this form is displayed. ' .
'This field allows A-z 0-9 & underscore chars without spaces.'
),
'separator' => 'before',
]
);
$this->endControlsSection();
$this->startControlsSection(
'section_style',
[
'label' => __('Button'),
'tab' => ControlsManager::TAB_STYLE,
]
);
$this->addGroupControl(
GroupControlTypography::getType(),
[
'name' => 'typography',
'scheme' => SchemeTypography::TYPOGRAPHY_4,
'selector' => '{{WRAPPER}} a.elementor-button',
]
);
$this->addGroupControl(
GroupControlTextShadow::getType(),
[
'name' => 'text_shadow',
'selector' => '{{WRAPPER}} .elementor-button',
]
);
$this->startControlsTabs('tabs_button_style');
$this->startControlsTab(
'tab_button_normal',
[
'label' => __('Normal'),
]
);
$this->addControl(
'button_text_color',
[
'label' => __('Text Color'),
'type' => ControlsManager::COLOR,
'selectors' => [
'{{WRAPPER}} a.elementor-button:not(#e)' => 'color: {{VALUE}};',
],
]
);
$this->addControl(
'background_color',
[
'label' => __('Background Color'),
'type' => ControlsManager::COLOR,
'scheme' => [
'type' => SchemeColor::getType(),
'value' => SchemeColor::COLOR_4,
],
'selectors' => [
'{{WRAPPER}} a.elementor-button' => 'background-color: {{VALUE}};',
],
]
);
$this->endControlsTab();
$this->startControlsTab(
'tab_button_hover',
[
'label' => __('Hover'),
]
);
$this->addControl(
'hover_color',
[
'label' => __('Text Color'),
'type' => ControlsManager::COLOR,
'selectors' => [
'{{WRAPPER}} a.elementor-button:not(#e):hover, {{WRAPPER}} a.elementor-button:not(#e):focus' => 'color: {{VALUE}};',
],
]
);
$this->addControl(
'button_background_hover_color',
[
'label' => __('Background Color'),
'type' => ControlsManager::COLOR,
'selectors' => [
'{{WRAPPER}} a.elementor-button:hover, {{WRAPPER}} a.elementor-button:focus' => 'background-color: {{VALUE}};',
],
]
);
$this->addControl(
'button_hover_border_color',
[
'label' => __('Border Color'),
'type' => ControlsManager::COLOR,
'condition' => [
'border_border!' => '',
],
'selectors' => [
'{{WRAPPER}} a.elementor-button:hover, {{WRAPPER}} a.elementor-button:focus' => 'border-color: {{VALUE}};',
],
]
);
$this->addControl(
'hover_animation',
[
'label' => __('Hover Animation'),
'type' => ControlsManager::HOVER_ANIMATION,
]
);
$this->endControlsTab();
$this->endControlsTabs();
$this->addGroupControl(
GroupControlBorder::getType(),
[
'name' => 'border',
'selector' => '{{WRAPPER}} .elementor-button',
'separator' => 'before',
]
);
$this->addControl(
'border_radius',
[
'label' => __('Border Radius'),
'type' => ControlsManager::DIMENSIONS,
'size_units' => ['px', '%'],
'selectors' => [
'{{WRAPPER}} a.elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->addGroupControl(
GroupControlBoxShadow::getType(),
[
'name' => 'button_box_shadow',
'selector' => '{{WRAPPER}} .elementor-button',
]
);
$this->addResponsiveControl(
'text_padding',
[
'label' => __('Padding'),
'type' => ControlsManager::DIMENSIONS,
'size_units' => ['px', 'em', '%'],
'selectors' => [
'{{WRAPPER}} a.elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
'separator' => 'before',
]
);
$this->endControlsSection();
}
/**
* Render button widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
*/
protected function render()
{
$settings = $this->getSettingsForDisplay();
if (!empty($settings['link']['url'])) {
$this->addLinkAttributes('button', $settings['link']);
$this->addRenderAttribute('button', 'class', 'elementor-button-link');
}
$this->addRenderAttribute('button', 'class', 'elementor-button');
$this->addRenderAttribute('text', 'class', 'elementor-button-text');
if (!empty($settings['button_css_id'])) {
$this->addRenderAttribute('button', 'id', $settings['button_css_id']);
}
if (!empty($settings['size'])) {
$this->addRenderAttribute('button', 'class', 'elementor-size-' . $settings['size']);
}
if ($settings['hover_animation']) {
$this->addRenderAttribute('button', 'class', 'elementor-animation-' . $settings['hover_animation']);
}
$this->addInlineEditingAttributes('text', 'none'); ?>