get_name(); } public function get_categories() { return [ 'addronix-addons-for-elementor' ]; } public function get_keywords() { return [ 'button', 'circle', 'cta', 'hover', 'slide', 'creative' ]; } public function get_style_depends() { return [ 'aafe-circle-button-style' ]; } protected function register_controls() { /* ══════════════════════════════════════════════════ * CONTENT TAB * ══════════════════════════════════════════════════ */ $this->start_controls_section( 'section_content', [ 'label' => esc_html__( 'Button Content', 'addronix-addons-for-elementor' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'button_text', [ 'label' => esc_html__( 'Text', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'Hover me', 'addronix-addons-for-elementor' ), 'dynamic' => [ 'active' => true ], 'placeholder' => esc_html__( 'Hover me', 'addronix-addons-for-elementor' ), ] ); $this->add_control( 'button_link', [ 'label' => esc_html__( 'Link', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::URL, 'placeholder' => esc_html__( 'https://your-link.com', 'addronix-addons-for-elementor' ), 'default' => [ 'url' => '#', 'is_external' => false, 'nofollow' => false, ], 'dynamic' => [ 'active' => true ], ] ); $this->add_control( 'button_icon', [ 'label' => esc_html__( 'Icon', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::ICONS, 'description' => esc_html__( 'Leave empty to use the default sliding arrow SVG.', 'addronix-addons-for-elementor' ), ] ); $this->add_control( 'icon_position', [ 'label' => esc_html__( 'Icon Position', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'before' => esc_html__( 'Before Text', 'addronix-addons-for-elementor' ), 'after' => esc_html__( 'After Text', 'addronix-addons-for-elementor' ), ], 'default' => 'after', ] ); $this->end_controls_section(); /* ══════════════════════════════════════════════════ * STYLE TAB: BUTTON * ══════════════════════════════════════════════════ */ $this->start_controls_section( 'section_button_style', [ 'label' => esc_html__( 'Button Style', 'addronix-addons-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'button_align', [ 'label' => esc_html__( 'Alignment', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => esc_html__( 'Left', 'addronix-addons-for-elementor' ), 'icon' => 'eicon-text-align-left' ], 'center' => [ 'title' => esc_html__( 'Center', 'addronix-addons-for-elementor' ), 'icon' => 'eicon-text-align-center' ], 'right' => [ 'title' => esc_html__( 'Right', 'addronix-addons-for-elementor' ), 'icon' => 'eicon-text-align-right' ], 'justify' => [ 'title' => esc_html__( 'Justify', 'addronix-addons-for-elementor' ), 'icon' => 'eicon-text-align-justify' ], ], 'default' => 'center', 'prefix_class' => 'aafe-circle-button-align%s-', ] ); $this->add_responsive_control( 'button_width', [ 'label' => esc_html__( 'Width', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'vw', 'rem' ], 'range' => [ 'px' => [ 'min' => 50, 'max' => 1000 ], '%' => [ 'min' => 10, 'max' => 100 ], ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'button_height', [ 'label' => esc_html__( 'Height', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'rem' ], 'range' => [ 'px' => [ 'min' => 20, 'max' => 200 ] ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button' => 'height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'button_typography', 'label' => esc_html__( 'Typography', 'addronix-addons-for-elementor' ), 'selector' => '{{WRAPPER}} .aafe-circle-button .aafe-circle-button__text', 'fields_options' => [ 'font_family' => [ 'default' => 'Inter' ], 'font_weight' => [ 'default' => '700' ], 'font_size' => [ 'default' => [ 'unit' => 'px', 'size' => 18 ] ], 'letter_spacing' => [ 'default' => [ 'unit' => 'em', 'size' => 0.05 ] ], ], ] ); $this->start_controls_tabs( 'tabs_button_colors' ); // Normal State $this->start_controls_tab( 'tab_button_normal', [ 'label' => esc_html__( 'Normal', 'addronix-addons-for-elementor' ), ] ); $this->add_control( 'button_color', [ 'label' => esc_html__( 'Text Color', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#234567', 'dynamic' => [ 'active' => true ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button .aafe-circle-button__text' => 'color: {{VALUE}};' ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'button_background', 'label' => esc_html__( 'Background', 'addronix-addons-for-elementor' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .aafe-circle-button', ] ); $this->add_responsive_control( 'button_border_radius', [ 'label' => esc_html__( 'Border Radius', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem' ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'button_border', 'label' => esc_html__( 'Border', 'addronix-addons-for-elementor' ), 'selector' => '{{WRAPPER}} .aafe-circle-button', ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'button_box_shadow', 'label' => esc_html__( 'Box Shadow', 'addronix-addons-for-elementor' ), 'selector' => '{{WRAPPER}} .aafe-circle-button', ] ); $this->end_controls_tab(); // Hover State $this->start_controls_tab( 'tab_button_hover', [ 'label' => esc_html__( 'Hover', 'addronix-addons-for-elementor' ), ] ); $this->add_control( 'button_color_hover', [ 'label' => esc_html__( 'Text Color', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#234567', 'dynamic' => [ 'active' => true ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button:hover .aafe-circle-button__text' => 'color: {{VALUE}};' ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'button_background_hover', 'label' => esc_html__( 'Background', 'addronix-addons-for-elementor' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .aafe-circle-button:hover', ] ); $this->add_control( 'button_border_color_hover', [ 'label' => esc_html__( 'Border Color', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .aafe-circle-button:hover' => 'border-color: {{VALUE}};', ], 'dynamic' => [ 'active' => true ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'button_box_shadow_hover', 'label' => esc_html__( 'Box Shadow', 'addronix-addons-for-elementor' ), 'selector' => '{{WRAPPER}} .aafe-circle-button:hover', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_responsive_control( 'button_padding', [ 'label' => esc_html__( 'Padding', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem' ], 'default' => [ 'top' => '12', 'bottom' => '12', 'left' => '18', 'right' => '18', 'unit' => 'px', 'isLinked' => false, ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'button_margin', [ 'label' => esc_html__( 'Margin', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem' ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); /* ══════════════════════════════════════════════════ * STYLE TAB: ICON * ══════════════════════════════════════════════════ */ $this->start_controls_section( 'section_icon_style', [ 'label' => esc_html__( 'Icon Style', 'addronix-addons-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'icon_size', [ 'label' => esc_html__( 'Icon Size', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem' ], 'range' => [ 'px' => [ 'min' => 5, 'max' => 100 ] ], 'default' => [ 'unit' => 'px', 'size' => 18 ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button__icon svg' => 'width: {{SIZE}}{{UNIT}}; height: auto;', '{{WRAPPER}} .aafe-circle-button__icon i' => 'font-size: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'icon_gap', [ 'label' => esc_html__( 'Icon Gap', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100 ] ], 'default' => [ 'unit' => 'px', 'size' => 10 ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button__icon--before' => 'margin-inline-end: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .aafe-circle-button__icon--after' => 'margin-inline-start: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'icon_stroke_width', [ 'label' => esc_html__( 'SVG Stroke Width', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 10, 'step' => 0.1 ] ], 'default' => [ 'unit' => 'px', 'size' => 2 ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button__icon .aafe-circle-button__default-svg' => 'stroke-width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'icon_translate_x_hover', [ 'label' => esc_html__( 'Hover Slide Distance (X)', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem' ], 'range' => [ 'px' => [ 'min' => -50, 'max' => 50 ] ], 'default' => [ 'unit' => 'px', 'size' => 5 ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button__icon' => 'transform: translateX(-{{SIZE}}{{UNIT}});', '{{WRAPPER}} .aafe-circle-button:hover .aafe-circle-button__icon' => 'transform: translateX(0);', ], ] ); $this->start_controls_tabs( 'tabs_icon_colors' ); $this->start_controls_tab( 'tab_icon_normal', [ 'label' => esc_html__( 'Normal', 'addronix-addons-for-elementor' ), ] ); $this->add_control( 'icon_color', [ 'label' => esc_html__( 'Icon Color', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#234567', 'dynamic' => [ 'active' => true ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button__icon svg' => 'fill: {{VALUE}}; color: {{VALUE}};', '{{WRAPPER}} .aafe-circle-button__icon .aafe-circle-button__default-svg' => 'stroke: {{VALUE}};', '{{WRAPPER}} .aafe-circle-button__icon i' => 'color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_icon_hover', [ 'label' => esc_html__( 'Hover', 'addronix-addons-for-elementor' ), ] ); $this->add_control( 'icon_color_hover', [ 'label' => esc_html__( 'Icon Color', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#234567', 'dynamic' => [ 'active' => true ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button:hover .aafe-circle-button__icon svg' => 'fill: {{VALUE}}; color: {{VALUE}};', '{{WRAPPER}} .aafe-circle-button:hover .aafe-circle-button__icon .aafe-circle-button__default-svg' => 'stroke: {{VALUE}};', '{{WRAPPER}} .aafe-circle-button:hover .aafe-circle-button__icon i' => 'color: {{VALUE}};', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); /* ══════════════════════════════════════════════════ * STYLE TAB: SLIDE CIRCLE * ══════════════════════════════════════════════════ */ $this->start_controls_section( 'section_circle_style', [ 'label' => esc_html__( 'Slide Circle Background', 'addronix-addons-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'circle_size', [ 'label' => esc_html__( 'Circle Size', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em', 'rem' ], 'range' => [ 'px' => [ 'min' => 10, 'max' => 150 ] ], 'default' => [ 'unit' => 'px', 'size' => 45 ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button::before' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'circle_border_radius', [ 'label' => esc_html__( 'Circle Border Radius', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100 ] ], 'default' => [ 'unit' => 'px', 'size' => 50 ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button::before' => 'border-radius: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'circle_offset_x', [ 'label' => esc_html__( 'X Position (Left Offset)', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem' ], 'range' => [ 'px' => [ 'min' => -100, 'max' => 200 ] ], 'default' => [ 'unit' => 'px', 'size' => 0 ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button::before' => 'inset-inline-start: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'circle_offset_y', [ 'label' => esc_html__( 'Y Position (Top Offset)', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem' ], 'range' => [ 'px' => [ 'min' => -100, 'max' => 200 ] ], 'default' => [ 'unit' => '%', 'size' => 50 ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button::before' => 'top: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'circle_translate_y', [ 'label' => esc_html__( 'Translate Y (Center Alignment)', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%', 'em', 'rem' ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100 ] ], 'default' => [ 'unit' => '%', 'size' => -50 ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button::before' => 'transform: translateY({{SIZE}}{{UNIT}});', ], ] ); $this->start_controls_tabs( 'tabs_circle_colors' ); $this->start_controls_tab( 'tab_circle_normal', [ 'label' => esc_html__( 'Normal', 'addronix-addons-for-elementor' ), ] ); $this->add_control( 'circle_bg_color', [ 'label' => esc_html__( 'Background Color', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#b1dae7', 'dynamic' => [ 'active' => true ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button::before' => 'background-color: {{VALUE}};' ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_circle_hover', [ 'label' => esc_html__( 'Hover', 'addronix-addons-for-elementor' ), ] ); $this->add_control( 'circle_bg_color_hover', [ 'label' => esc_html__( 'Background Color', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#b1dae7', 'dynamic' => [ 'active' => true ], 'selectors' => [ '{{WRAPPER}} .aafe-circle-button:hover::before' => 'background-color: {{VALUE}};' ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); /* ══════════════════════════════════════════════════ * STYLE TAB: HOVER EFFECTS * ══════════════════════════════════════════════════ */ $this->start_controls_section( 'style_hover_effects', [ 'label' => esc_html__( 'Hover Effects (Global)', 'addronix-addons-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'hover_effect_type', [ 'label' => esc_html__( 'Type', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__( 'None', 'addronix-addons-for-elementor' ), 'lift' => esc_html__( 'Lift', 'addronix-addons-for-elementor' ), 'glow' => esc_html__( 'Glow', 'addronix-addons-for-elementor' ), 'scale' => esc_html__( 'Scale', 'addronix-addons-for-elementor' ), 'border-pop' => esc_html__( 'Border Pop', 'addronix-addons-for-elementor' ), 'shine' => esc_html__( 'Shine', 'addronix-addons-for-elementor' ), ], 'default' => 'none', ] ); $this->add_control( 'hover_scale', [ 'label' => esc_html__( 'Scale Amount', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 1.0, 'max' => 1.2, 'step' => 0.01 ] ], 'default' => [ 'size' => 1.03 ], 'condition' => [ 'hover_effect_type' => [ 'scale', 'lift' ] ], ] ); $this->add_control( 'hover_duration', [ 'label' => esc_html__( 'Duration (ms)', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 100, 'max' => 800, 'step' => 50 ] ], 'default' => [ 'size' => 300 ], ] ); $this->add_control( 'hover_easing', [ 'label' => esc_html__( 'Easing', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'ease' => esc_html__( 'Ease', 'addronix-addons-for-elementor' ), 'ease-in' => esc_html__( 'Ease-in', 'addronix-addons-for-elementor' ), 'ease-out' => esc_html__( 'Ease-out', 'addronix-addons-for-elementor' ), 'ease-in-out' => esc_html__( 'Ease-in-out', 'addronix-addons-for-elementor' ), 'linear' => esc_html__( 'Linear', 'addronix-addons-for-elementor' ), ], 'default' => 'ease', ] ); $this->end_controls_section(); // AAFE IMPROVEMENT: Entrance Animation section $this->start_controls_section( 'section_entrance_animation', [ 'label' => esc_html__( 'Entrance Animation', 'addronix-addons-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'animation_type', [ 'label' => esc_html__( 'Animation Type', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'none' => esc_html__( 'None', 'addronix-addons-for-elementor' ), 'fadeIn' => esc_html__( 'Fade In', 'addronix-addons-for-elementor' ), 'fadeInUp' => esc_html__( 'Fade In Up', 'addronix-addons-for-elementor' ), 'fadeInDown' => esc_html__( 'Fade In Down', 'addronix-addons-for-elementor' ), 'fadeInLeft' => esc_html__( 'Fade In Left', 'addronix-addons-for-elementor' ), 'fadeInRight' => esc_html__( 'Fade In Right', 'addronix-addons-for-elementor' ), 'zoomIn' => esc_html__( 'Zoom In', 'addronix-addons-for-elementor' ), ], 'default' => 'none', ] ); $this->add_control( 'animation_duration', [ 'label' => esc_html__( 'Animation Duration (ms)', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::NUMBER, 'default' => 600, 'condition' => [ 'animation_type!' => 'none', ], ] ); $this->add_control( 'animation_delay', [ 'label' => esc_html__( 'Animation Delay (ms)', 'addronix-addons-for-elementor' ), 'type' => Controls_Manager::NUMBER, 'default' => 0, 'condition' => [ 'animation_type!' => 'none', ], ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); if ( empty( $settings['button_text'] ) ) { return; } $this->add_render_attribute( 'wrapper', 'class', 'aafe-circle-button-wrapper' ); $hover_type = $settings['hover_effect_type'] ?? 'none'; if ( 'none' !== $hover_type ) { $this->add_render_attribute( 'wrapper', 'data-hover', $hover_type ); $hover_scale = isset( $settings['hover_scale']['size'] ) ? $settings['hover_scale']['size'] : 1.03; $hover_duration = isset( $settings['hover_duration']['size'] ) ? $settings['hover_duration']['size'] : 300; $hover_easing = $settings['hover_easing'] ?? 'ease'; $this->add_render_attribute( 'wrapper', 'style', "--aafe-hover-scale: {$hover_scale}; --aafe-transition: {$hover_duration}ms; --aafe-easing: {$hover_easing};" ); } // AAFE IMPROVEMENT: Entrance Animation section if ( ! empty( $settings['animation_type'] ) && 'none' !== $settings['animation_type'] ) { $this->add_render_attribute( 'wrapper', [ 'data-aafe-animation' => $settings['animation_type'], 'data-aafe-duration' => $settings['animation_duration'] ?? 600, 'data-aafe-delay' => $settings['animation_delay'] ?? 0, ] ); } $this->add_render_attribute( 'button', 'class', 'aafe-circle-button' ); if ( ! empty( $settings['button_link']['url'] ) ) { $this->add_link_attributes( 'button', $settings['button_link'] ); $tag = 'a'; } else { $tag = 'span'; } ?>
print_render_attribute_string( 'wrapper' ); ?>>
< print_render_attribute_string( 'button' ); ?>> render_icon( $settings ); ?> render_icon( $settings ); ?> >
'; if ( ! empty( $settings['button_icon']['value'] ) ) { Icons_Manager::render_icon( $settings['button_icon'], [ 'aria-hidden' => 'true' ] ); } else { // Default Arrow SVG ?> '; } protected function content_template() { ?> <# if ( ! settings.button_text ) return; var hoverType = settings.hover_effect_type || 'none'; var hoverAttrs = ''; if ( hoverType !== 'none' ) { var hoverScale = settings.hover_scale && settings.hover_scale.size ? settings.hover_scale.size : 1.03; var hoverDur = settings.hover_duration && settings.hover_duration.size ? settings.hover_duration.size : 300; var hoverEasing = settings.hover_easing || 'ease'; hoverAttrs = ' data-hover="' + hoverType + '" style="--aafe-hover-scale:' + hoverScale + '; --aafe-transition:' + hoverDur + 'ms; --aafe-easing:' + hoverEasing + ';"'; } // AAFE IMPROVEMENT: Entrance Animation section if ( settings.animation_type && settings.animation_type !== 'none' ) { hoverAttrs += ' data-aafe-animation="' + settings.animation_type + '"'; hoverAttrs += ' data-aafe-duration="' + (settings.animation_duration || 600) + '"'; hoverAttrs += ' data-aafe-delay="' + (settings.animation_delay || 0) + '"'; } var tag = 'span'; var linkAttrs = ''; if ( settings.button_link && settings.button_link.url ) { tag = 'a'; linkAttrs = ' href="' + settings.button_link.url + '"'; } var posClass = settings.icon_position === 'before' ? 'aafe-circle-button__icon--before' : 'aafe-circle-button__icon--after'; #>
<{{{ tag }}}{{{ linkAttrs }}} class="aafe-circle-button"> <# if ( settings.icon_position === 'before' ) { #> <# if ( settings.button_icon && settings.button_icon.value ) { #> <# var iconHTML = elementor.helpers.renderIcon( view, settings.button_icon, { 'aria-hidden': true }, 'i', 'object' ); #> {{{ iconHTML.value }}} <# } else { #> <# } #> <# } #> {{{ settings.button_text }}} <# if ( settings.icon_position === 'after' ) { #> <# if ( settings.button_icon && settings.button_icon.value ) { #> <# var iconHTML = elementor.helpers.renderIcon( view, settings.button_icon, { 'aria-hidden': true }, 'i', 'object' ); #> {{{ iconHTML.value }}} <# } else { #> <# } #> <# } #>