__( 'Extra Small', 'elementor' ), 'sm' => __( 'Small', 'elementor' ), 'md' => __( 'Medium', 'elementor' ), 'lg' => __( 'Large', 'elementor' ), 'xl' => __( 'Extra Large', 'elementor' ), ]; } /** * Register button widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @access protected */ protected function _register_controls() { $this->start_controls_section( 'section_button', [ 'label' => __( 'Button Fixed', 'elementor' ), ] ); $this->add_control( 'button_type', [ 'label' => __( 'Type', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => __( 'Default', 'elementor' ), 'info' => __( 'Info', 'elementor' ), 'success' => __( 'Success', 'elementor' ), 'warning' => __( 'Warning', 'elementor' ), 'danger' => __( 'Danger', 'elementor' ), ], 'prefix_class' => 'elementor-button-', ] ); $this->add_control( 'text', [ 'label' => __( 'Text', 'elementor' ), 'type' => Controls_Manager::TEXT, 'default' => __( 'Click me', 'elementor' ), 'placeholder' => __( 'Click me', 'elementor' ), ] ); $this->add_control( 'link', [ 'label' => __( 'Link', 'elementor' ), 'type' => Controls_Manager::URL, 'placeholder' => 'http://your-link.com', 'default' => [ 'url' => '#', ], ] ); $this->add_responsive_control( 'align_fixed', [ 'label' => __( 'Alignment', 'elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left_fixed' => [ 'title' => __( 'Left', 'elementor' ), 'icon' => 'fa fa-align-left', ], 'right_fixed' => [ 'title' => __( 'Right', 'elementor' ), 'icon' => 'fa fa-align-right', ], ], 'prefix_class' => 'elementor%s-align-fixed', 'default' => 'left_fixed', ] ); $this->add_control( 'size', [ 'label' => __( 'Size', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'sm', 'options' => self::get_button_sizes(), ] ); $this->add_control( 'icon', [ 'label' => __( 'Icon', 'elementor' ), 'type' => Controls_Manager::ICON, 'label_block' => true, 'default' => '', ] ); $this->add_control( 'icon_align', [ 'label' => __( 'Icon Position', 'elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'left', 'options' => [ 'left' => __( 'Before', 'elementor' ), 'right' => __( 'After', 'elementor' ), ], 'condition' => [ 'icon!' => '', ], ] ); $this->add_control( 'icon_indent', [ 'label' => __( 'Icon Spacing', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'max' => 50, ], ], 'condition' => [ 'icon!' => '', ], 'selectors' => [ '{{WRAPPER}} .elementor-button .elementor-align-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .elementor-button .elementor-align-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'view', [ 'label' => __( 'View', 'elementor' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional', ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style', [ 'label' => __( 'Button', 'elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'typography', 'label' => __( 'Typography', 'elementor' ), 'scheme' => Scheme_Typography::TYPOGRAPHY_4, 'selector' => '{{WRAPPER}} a.elementor-button, {{WRAPPER}} .elementor-button', ] ); $this->start_controls_tabs( 'tabs_button_style' ); $this->start_controls_tab( 'tab_button_normal', [ 'label' => __( 'Normal', 'elementor' ), ] ); $this->add_control( 'button_text_color', [ 'label' => __( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} a.elementor-button, {{WRAPPER}} .elementor-button' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'background_color', [ 'label' => __( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_4, ], 'selectors' => [ '{{WRAPPER}} a.elementor-button, {{WRAPPER}} .elementor-button' => 'background-color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_button_hover', [ 'label' => __( 'Hover', 'elementor' ), ] ); $this->add_control( 'hover_color', [ 'label' => __( 'Text Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} a.elementor-button:hover, {{WRAPPER}} .elementor-button:hover' => 'color: {{VALUE}};', ], ] ); $this->add_control( 'button_background_hover_color', [ 'label' => __( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} a.elementor-button:hover, {{WRAPPER}} .elementor-button:hover' => 'background-color: {{VALUE}};', ], ] ); $this->add_control( 'button_hover_border_color', [ 'label' => __( 'Border Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'condition' => [ 'border_border!' => '', ], 'selectors' => [ '{{WRAPPER}} a.elementor-button:hover, {{WRAPPER}} .elementor-button:hover' => 'border-color: {{VALUE}};', ], ] ); $this->add_control( 'hover_animation', [ 'label' => __( 'Animation', 'elementor' ), 'type' => Controls_Manager::HOVER_ANIMATION, ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'border', 'label' => __( 'Border', 'elementor' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} .elementor-button', 'separator' => 'before', ] ); $this->add_control( 'border_radius', [ 'label' => __( 'Border Radius', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} a.elementor-button, {{WRAPPER}} .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'button_box_shadow', 'selector' => '{{WRAPPER}} .elementor-button', ] ); $this->add_control( 'text_padding', [ 'label' => __( 'Text Padding', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', 'em', '%' ], 'selectors' => [ '{{WRAPPER}} a.elementor-button, {{WRAPPER}} .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->end_controls_section(); } /** * Render button widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @access protected */ protected function render() { $settings = $this->get_settings(); $this->add_render_attribute( 'wrapper', 'class', 'elementor-button-wrapper '. $settings['align_fixed']); if ( ! empty( $settings['link']['url'] ) ) { $this->add_render_attribute( 'button', 'href', $settings['link']['url'] ); $this->add_render_attribute( 'button', 'class', 'elementor-button-link' ); if ( $settings['link']['is_external'] ) { $this->add_render_attribute( 'button', 'target', '_blank' ); } if ( $settings['link']['nofollow'] ) { $this->add_render_attribute( 'button', 'rel', 'nofollow' ); } } $this->add_render_attribute( 'button', 'class', 'elementor-button' ); if ( ! empty( $settings['size'] ) ) { $this->add_render_attribute( 'button', 'class', 'elementor-size-' . $settings['size'] ); } if ( $settings['hover_animation'] ) { $this->add_render_attribute( 'button', 'class', 'elementor-animation-' . $settings['hover_animation'] ); } if ( $settings['align_fixed'] ) { $this->add_render_attribute( 'button', 'class', 'elementor-fixed-pos-' . $settings['align_fixed'] ); } ?>
get_render_attribute_string( 'wrapper' ); ?>> get_render_attribute_string( 'button' ); ?>> render_text(); ?>
<# if ( settings.icon ) { #> <# } #> {{{ settings.text }}}
get_settings(); $this->add_render_attribute( 'content-wrapper', 'class', 'elementor-button-content-wrapper' ); $this->add_render_attribute( 'icon-align', 'class', 'elementor-align-icon-' . $settings['icon_align'] ); $this->add_render_attribute( 'icon-align', 'class', 'elementor-button-icon' ); ?> get_render_attribute_string( 'content-wrapper' ); ?>> get_render_attribute_string( 'icon-align' ); ?>>