easy-elements / widgets / button / button.php

button.php in Easy Elements for Elementor – Addons & Website Templates 1.2.1, at widgets/button/button.php

760 lines 22.2 KB

Raw Download Zip

1	<?php
2	use Elementor\Controls_Manager;
3	use Elementor\Widget_Base;
4
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit;
7	}
8
9	class Easyel_Button_Widget extends \Elementor\Widget_Base {
10
11	public function get_style_depends() {
12	$handle = 'eel-button-style';
13	$css_path = plugin_dir_path( __FILE__ ) . 'css/button.min.css';
14
15	if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
16	wp_register_style( $handle, plugins_url( 'css/button.min.css', __FILE__ ), [], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $css_path ) : EASYELEMENTS_VER );
17	}
18	return [ $handle ];
19	}
20
21	public function get_name() {
22	return 'eel-button';
23	}
24
25	public function get_title() {
26	return __( 'Button', 'easy-elements' );
27	}
28
29	public function get_icon() {
30	return 'easyicon easyelIcon-button';
31	}
32
33	public function get_categories() {
34	return [ 'easyelements_category' ];
35	}
36
37	public function get_keywords() {
38	return [ 'button', 'link', 'click', 'text' ];
39	}
40
41	protected function register_controls() {
42
43	$this->start_controls_section(
44	'content_section',
45	[
46	'label' => esc_html__('Button Settings', 'easy-elements'),
47	'tab' => Controls_Manager::TAB_CONTENT,
48	]
49	);
50
51	$this->add_control(
52	'button_text',
53	[
54	'label' => esc_html__('Button Text', 'easy-elements'),
55	'type' => Controls_Manager::TEXTAREA,
56	'label_block' => true,
57	'default' => esc_html__('Click Here', 'easy-elements'),
58	'placeholder' => esc_html__('Enter button text', 'easy-elements'),
59	'dynamic' => [
60	'active' => true,
61	],
62	]
63	);
64
65	$this->add_control(
66	'button_url',
67	[
68	'label' => esc_html__('Button URL', 'easy-elements'),
69	'type' => Controls_Manager::URL,
70	'default' => [
71	'url' => '#',
72	'is_external' => false,
73	'nofollow' => false,
74	],
75	'dynamic' => [
76	'active' => true,
77	],
78	]
79	);
80
81	$this->add_control(
82	'button_type',
83	[
84	'label' => esc_html__('Button Type', 'easy-elements'),
85	'type' => Controls_Manager::SELECT,
86	'default' => 'primary',
87	'options' => [
88	'primary' => esc_html__('Primary', 'easy-elements'),
89	'outline' => esc_html__('Outline', 'easy-elements'),
90	'icon_btn' => esc_html__('Icon', 'easy-elements'),
91	],
92	]
93	);
94
95	$this->add_control(
96	'button_icon',
97	[
98	'label' => esc_html__('Icon', 'easy-elements'),
99	'type' => Controls_Manager::ICONS,
100	'default' => [
101	'value' => '',
102	'library' => '',
103	],
104	]
105	);
106
107	$this->add_control(
108	'icon_position',
109	[
110	'label' => esc_html__('Icon Position', 'easy-elements'),
111	'type' => Controls_Manager::SELECT,
112	'default' => 'after',
113	'options' => [
114	'before' => esc_html__('Before Text', 'easy-elements'),
115	'after' => esc_html__('After Text', 'easy-elements'),
116	],
117	'condition' => [
118	'button_icon[value]!' => '',
119	],
120	]
121	);
122	$this->add_responsive_control(
123	'icon_spacing',
124	[
125	'label' => esc_html__('Icon Spacing', 'easy-elements'),
126	'type' => Controls_Manager::SLIDER,
127	'size_units' => ['px'],
128	'range' => [
129	'px' => [
130	'min' => 0,
131	'max' => 50,
132	],
133	'em' => [
134	'min' => 0,
135	'max' => 5,
136	],
137	],
138	'default' => [
139	'unit' => 'px',
140	'size' => 8,
141	],
142	'selectors' => [
143	'{{WRAPPER}} .eel-button .eel-button-icon-before' => 'margin-right: {{SIZE}}{{UNIT}};',
144	'{{WRAPPER}} .eel-button .eel-button-icon-after' => 'margin-left: {{SIZE}}{{UNIT}}; margin-right: 0;',
145	'{{WRAPPER}} .eel-button i.eel-button-icon-before' => 'margin-right: {{SIZE}}{{UNIT}};',
146	'{{WRAPPER}} .eel-button i.eel-button-icon-after' => 'margin-left: {{SIZE}}{{UNIT}}; margin-right: 0;',
147	'{{WRAPPER}} .eel-button svg.eel-button-icon-before' => 'margin-right: {{SIZE}}{{UNIT}};',
148	'{{WRAPPER}} .eel-button svg.eel-button-icon-after' => 'margin-left: {{SIZE}}{{UNIT}}; margin-right: 0;',
149	],
150	]
151	);
152
153	$this->add_responsive_control(
154	'button_min_width',
155	[
156	'label' => esc_html__('Minimum Width', 'easy-elements'),
157	'type' => Controls_Manager::SLIDER,
158	'size_units' => ['px'],
159	'range' => [
160	'px' => [
161	'min' => 100,
162	'max' => 1000,
163	],
164	],
165	'default' => [
166	'unit' => 'px',
167	'size' => 150,
168	],
169	'selectors' => [
170	'{{WRAPPER}} .eel-button' => 'min-width: {{SIZE}}{{UNIT}};',
171	],
172	]
173	);
174
175	$this->add_responsive_control(
176	'button_alignment',
177	[
178	'label' => esc_html__( 'Content Alignment', 'easy-elements' ),
179	'type' => \Elementor\Controls_Manager::CHOOSE,
180	'options' => [
181	'flex-start' => [
182	'title' => esc_html__( 'Left', 'easy-elements' ),
183	'icon' => 'eicon-text-align-left',
184	],
185	'center' => [
186	'title' => esc_html__( 'Center', 'easy-elements' ),
187	'icon' => 'eicon-text-align-center',
188	],
189	'flex-end' => [
190	'title' => esc_html__( 'Right', 'easy-elements' ),
191	'icon' => 'eicon-text-align-right',
192	],
193	],
194	'toggle' => true,
195	'selectors' => [
196	'{{WRAPPER}} .eel-button' => 'justify-content: {{VALUE}};',
197	],
198	]
199	);
200
201	$this->add_control(
202	'show_gradient',
203	[
204	'label' => esc_html__( 'Gradient Button', 'easy-elements' ),
205	'type' => Controls_Manager::SWITCHER,
206	'label_on' => esc_html__( 'Yes', 'easy-elements' ),
207	'label_off' => esc_html__( 'No', 'easy-elements' ),
208	'default' => '',
209	]
210	);
211
212	// First color
213	$this->add_control(
214	'easy_gradient_color_1',
215	[
216	'label' => esc_html__( 'Gradient 1', 'easy-elements' ),
217	'type' => \Elementor\Controls_Manager::COLOR,
218	'default' => '#4750CC',
219	'condition' => [
220	'show_gradient' => 'yes',
221	],
222	'selectors' => [
223	'{{WRAPPER}} .eel-button-gradient' => '--eel-gradient-1: {{VALUE}};',
224	],
225	]
226	);
227
228	// Second color
229	$this->add_control(
230	'easy_gradient_color_2',
231	[
232	'label' => esc_html__( 'Gradient 2', 'easy-elements' ),
233	'type' => \Elementor\Controls_Manager::COLOR,
234	'default' => '#EF5CE8',
235	'condition' => [
236	'show_gradient' => 'yes',
237	],
238	'selectors' => [
239	'{{WRAPPER}} .eel-button-gradient' => '--eel-gradient-2: {{VALUE}};',
240	],
241	]
242	);
243
244	// Third color
245	$this->add_control(
246	'easy_gradient_color_3',
247	[
248	'label' => esc_html__( 'Gradient 3', 'easy-elements' ),
249	'type' => \Elementor\Controls_Manager::COLOR,
250	'default' => '#EFC7AE',
251	'condition' => [
252	'show_gradient' => 'yes',
253	],
254	'selectors' => [
255	'{{WRAPPER}} .eel-button-gradient' => '--eel-gradient-3: {{VALUE}};',
256	],
257	]
258	);
259
260	$this->add_control(
261	'border_gradient_button',
262	[
263	'label' => esc_html__( 'Border Gradient Button', 'easy-elements' ),
264	'type' => Controls_Manager::SWITCHER,
265	'label_on' => esc_html__( 'Yes', 'easy-elements' ),
266	'label_off' => esc_html__( 'No', 'easy-elements' ),
267	'default' => '',
268	]
269	);
270
271	$this->add_group_control(
272	\Elementor\Group_Control_Background::get_type(),
273	[
274	'name' => 'border_gradient_color',
275	'fields_options' => [
276	'gradient_angle' => [
277	'default' => [
278	'unit' => 'deg',
279	'size' => 180,
280	],
281	],
282	],
283	'selector' => '{{WRAPPER}} .eel-button-border-gradient::before',
284	'condition' => [
285	'border_gradient_button' => 'yes',
286	],
287	]
288	);
289
290
291	$this->end_controls_section();
292
293	// Style Tab - Button
294	$this->start_controls_section(
295	'style_section',
296	[
297	'label' => esc_html__('Button Style', 'easy-elements'),
298	'tab' => Controls_Manager::TAB_STYLE,
299	]
300	);
301
302	$this->add_group_control(
303	\Elementor\Group_Control_Typography::get_type(),
304	[
305	'name' => 'button_typography',
306	'selector' => '{{WRAPPER}} .eel-button',
307	]
308	);
309
310	$this->start_controls_tabs('button_styles');
311
312	$this->start_controls_tab(
313	'button_normal',
314	[
315	'label' => esc_html__('Normal', 'easy-elements'),
316	]
317	);
318
319	$this->add_control(
320	'button_text_color',
321	[
322	'label' => esc_html__('Text Color', 'easy-elements'),
323	'type' => Controls_Manager::COLOR,
324	'default' => '',
325	'selectors' => [
326	'{{WRAPPER}} .eel-button' => 'color: {{VALUE}};',
327	],
328	]
329	);
330
331	$this->add_control(
332	'button_background_color',
333	[
334	'label' => esc_html__('Background Color', 'easy-elements'),
335	'type' => Controls_Manager::COLOR,
336	'selectors' => [
337	'{{WRAPPER}} .eel-button' => 'background-color: {{VALUE}};',
338	],
339	]
340	);
341
342	$this->add_group_control(
343	\Elementor\Group_Control_Background::get_type(),
344	[
345	'name' => 'button_background_gradient',
346	'label' => esc_html__('Background', 'easy-elements'),
347	'types' => ['classic', 'gradient'],
348	'selector' => '{{WRAPPER}} .eel-button',
349	]
350	);
351
352
353	$this->add_group_control(
354	\Elementor\Group_Control_Border::get_type(),
355	[
356	'name' => 'button_border',
357	'selector' => '{{WRAPPER}} .eel-button',
358	]
359	);
360
361	$this->add_control(
362	'button_border_radius',
363	[
364	'label' => esc_html__('Border Radius', 'easy-elements'),
365	'type' => Controls_Manager::DIMENSIONS,
366	'size_units' => ['px'],
367	'selectors' => [
368	'{{WRAPPER}} .eel-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
369	'{{WRAPPER}} .eel-button.eel-button-border-gradient::before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
370	],
371	]
372	);
373
374	$this->add_group_control(
375	\Elementor\Group_Control_Box_Shadow::get_type(),
376	[
377	'name' => 'button_box_shadow',
378	'selector' => '{{WRAPPER}} .eel-button',
379	]
380	);
381
382	$this->add_responsive_control(
383	'button_padding',
384	[
385	'label' => esc_html__('Padding', 'easy-elements'),
386	'type' => Controls_Manager::DIMENSIONS,
387	'size_units' => ['px'],
388	'selectors' => [
389	'{{WRAPPER}} .eel-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
390	],
391	]
392	);
393
394	$this->add_responsive_control(
395	'button_margin',
396	[
397	'label' => esc_html__('Margin', 'easy-elements'),
398	'type' => Controls_Manager::DIMENSIONS,
399	'size_units' => ['px'],
400	'selectors' => [
401	'{{WRAPPER}} .eel-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
402	],
403	]
404	);
405
406	$this->end_controls_tab();
407
408	$this->start_controls_tab(
409	'button_hover',
410	[
411	'label' => esc_html__('Hover', 'easy-elements'),
412	]
413	);
414
415	$this->add_control(
416	'button_hover_text_color',
417	[
418	'label' => esc_html__('Text Color', 'easy-elements'),
419	'type' => Controls_Manager::COLOR,
420	'default' => '',
421	'selectors' => [
422	'{{WRAPPER}} .eel-button:hover' => 'color: {{VALUE}};',
423	],
424	]
425	);
426
427	$this->add_control(
428	'button_hover_background_color',
429	[
430	'label' => esc_html__('Background Color', 'easy-elements'),
431	'type' => Controls_Manager::COLOR,
432	'default' => '',
433	'selectors' => [
434	'{{WRAPPER}} .eel-button:hover' => 'background-color: {{VALUE}};',
435	],
436	]
437	);
438
439	$this->add_group_control(
440	\Elementor\Group_Control_Background::get_type(),
441	[
442	'name' => 'button_hover_background_gradient',
443	'label' => esc_html__('Hover Background', 'easy-elements'),
444	'types' => ['classic', 'gradient'],
445	'selector' => '{{WRAPPER}} .eel-button:hover',
446	]
447	);
448
449
450	$this->add_group_control(
451	\Elementor\Group_Control_Border::get_type(),
452	[
453	'name' => 'button_hover_border',
454	'selector' => '{{WRAPPER}} .eel-button:hover',
455	]
456	);
457	$this->end_controls_tab();
458	$this->end_controls_tabs();
459
460	$this->end_controls_section();
461
462	// Icon Style Section
463	$this->start_controls_section(
464	'icon_style_section',
465	[
466	'label' => esc_html__('Icon Style', 'easy-elements'),
467	'tab' => Controls_Manager::TAB_STYLE,
468	'condition' => [
469	'button_icon[value]!' => '',
470	],
471	]
472	);
473	$this->start_controls_tabs('button_icon_styles');
474	$this->start_controls_tab(
475	'button_icon_normal',
476	[
477	'label' => esc_html__('Normal', 'easy-elements'),
478	]
479	);
480	$this->add_control(
481	'icon_color',
482	[
483	'label' => esc_html__('Color', 'easy-elements'),
484	'type' => Controls_Manager::COLOR,
485	'default' => '',
486	'selectors' => [
487	'{{WRAPPER}} .eel-button i' => 'color: {{VALUE}};',
488	'{{WRAPPER}} .eel-button svg' => 'fill: {{VALUE}};',
489	'{{WRAPPER}} .eel-button svg path' => 'stroke: {{VALUE}};',
490	'{{WRAPPER}} .eel-button .elementor-icon' => 'color: {{VALUE}};',
491	'{{WRAPPER}} .eel-button .elementor-icon svg' => 'fill: {{VALUE}};',
492	'{{WRAPPER}} .eel-button .elementor-icon i' => 'color: {{VALUE}};',
493	'{{WRAPPER}} .eel-button .eel-button-icon-before' => 'color: {{VALUE}};',
494	'{{WRAPPER}} .eel-button .eel-button-icon-after' => 'color: {{VALUE}};',
495	'{{WRAPPER}} .eel-button .eel-button-icon-before svg' => 'fill: {{VALUE}};',
496	'{{WRAPPER}} .eel-button .eel-button-icon-after svg' => 'fill: {{VALUE}};',
497	'{{WRAPPER}} .eel-button .eel-button-icon-before i' => 'color: {{VALUE}};',
498	'{{WRAPPER}} .eel-button .eel-button-icon-after i' => 'color: {{VALUE}};',
499	'{{WRAPPER}} .eel-button .elementor-icon-wrapper' => 'color: {{VALUE}};',
500	'{{WRAPPER}} .eel-button .elementor-icon-wrapper svg' => 'fill: {{VALUE}};',
501	],
502	]
503	);
504
505	$this->add_control(
506	'icon_bg',
507	[
508	'label' => esc_html__('Background', 'easy-elements'),
509	'type' => Controls_Manager::COLOR,
510	'default' => '',
511	'selectors' => [
512	'{{WRAPPER}} .eel-button .eel-button-icon-before, {{WRAPPER}} .eel-button .eel-button-icon-after' => 'background-color: {{VALUE}};',
513	],
514	]
515	);
516
517	$this->add_group_control(
518	\Elementor\Group_Control_Background::get_type(),
519	[
520	'name' => 'icon_background',
521	'label' => esc_html__('Icon Background', 'easy-elements'),
522	'types' => ['classic', 'gradient'],
523	'selector' => '{{WRAPPER}} .eel-button .eel-button-icon-before, {{WRAPPER}} .eel-button .eel-button-icon-after',
524	]
525	);
526
527	$this->add_responsive_control(
528	'icon_size',
529	[
530	'label' => esc_html__('Size', 'easy-elements'),
531	'type' => Controls_Manager::SLIDER,
532	'size_units' => ['px'],
533	'range' => [
534	'px' => [
535	'min' => 6,
536	'max' => 50,
537	],
538	'em' => [
539	'min' => 0.5,
540	'max' => 5,
541	],
542	],
543	'default' => [
544	'unit' => 'px',
545	'size' => 16,
546	],
547	'selectors' => [
548	'{{WRAPPER}} .eel-button i' => 'font-size: {{SIZE}}{{UNIT}};',
549	'{{WRAPPER}} .eel-button svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
550	'{{WRAPPER}} .eel-button .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
551	'{{WRAPPER}} .eel-button .eel-button-icon-before' => 'font-size: {{SIZE}}{{UNIT}};',
552	'{{WRAPPER}} .eel-button .eel-button-icon-after' => 'font-size: {{SIZE}}{{UNIT}};',
553	'{{WRAPPER}} .eel-button .eel-button-icon-before svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
554	'{{WRAPPER}} .eel-button .eel-button-icon-after svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
555	'{{WRAPPER}} .eel-button .eel-button-icon-before i' => 'font-size: {{SIZE}}{{UNIT}};',
556	'{{WRAPPER}} .eel-button .eel-button-icon-after i' => 'font-size: {{SIZE}}{{UNIT}};',
557	'{{WRAPPER}} .eel-button img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
558	],
559	]
560	);
561
562	$this->add_responsive_control(
563	'icon_box_width',
564	[
565	'label' => esc_html__('Width', 'easy-elements'),
566	'type' => Controls_Manager::SLIDER,
567	'selectors' => [
568	'{{WRAPPER}} .eel-button .eel-button-icon-before, {{WRAPPER}} .eel-button .eel-button-icon-after' => 'width: {{SIZE}}{{UNIT}};',
569	],
570	]
571	);
572	$this->add_responsive_control(
573	'icon_box_height',
574	[
575	'label' => esc_html__('Height', 'easy-elements'),
576	'type' => Controls_Manager::SLIDER,
577	'selectors' => [
578	'{{WRAPPER}} .eel-button .eel-button-icon-before, {{WRAPPER}} .eel-button .eel-button-icon-after' => 'height: {{SIZE}}{{UNIT}};',
579	],
580	]
581	);
582	$this->add_responsive_control(
583	'icon_box_border_radius',
584	[
585	'label' => esc_html__('Border Radius', 'easy-elements'),
586	'type' => Controls_Manager::DIMENSIONS,
587	'size_units' => ['px','%'],
588	'selectors' => [
589	'{{WRAPPER}} .eel-button .eel-button-icon-before,
590	{{WRAPPER}} .eel-button .eel-button-icon-after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
591	],
592	]
593	);
594	$this->add_responsive_control(
595	'icon_rotation',
596	[
597	'label' => esc_html__('Default Icon Rotation', 'easy-elements'),
598	'type' => Controls_Manager::SLIDER,
599	'size_units' => ['deg'],
600	'range' => [
601	'deg' => [
602	'min' => -360,
603	'max' => 360,
604	],
605	],
606	'default' => [
607	'unit' => 'deg',
608	'size' => 0,
609	],
610	'selectors' => [
611	'{{WRAPPER}} .eel-button i' => 'transition: all 0.3s ease-in; transform: rotate({{SIZE}}{{UNIT}});',
612	'{{WRAPPER}} .eel-button svg' => 'transition: all 0.3s ease-in; transform: rotate({{SIZE}}{{UNIT}});',
613	],
614	]
615	);
616	$this->end_controls_tab();
617
618	// Button Icon HOver Style
619	$this->start_controls_tab(
620	'button_icon_hover',
621	[
622	'label' => esc_html__('Hover', 'easy-elements'),
623	]
624	);
625	$this->add_control(
626	'icon_hover_color',
627	[
628	'label' => esc_html__('Color', 'easy-elements'),
629	'type' => Controls_Manager::COLOR,
630	'default' => '',
631	'selectors' => [
632	'{{WRAPPER}} .eel-button:hover i' => 'color: {{VALUE}};',
633	'{{WRAPPER}} .eel-button:hover svg' => 'fill: {{VALUE}};',
634	'{{WRAPPER}} .eel-button:hover svg path' => 'stroke: {{VALUE}};',
635	'{{WRAPPER}} .eel-button:hover .elementor-icon' => 'color: {{VALUE}};',
636	'{{WRAPPER}} .eel-button:hover .elementor-icon svg' => 'fill: {{VALUE}};',
637	'{{WRAPPER}} .eel-button:hover .elementor-icon i' => 'color: {{VALUE}};',
638	'{{WRAPPER}} .eel-button:hover .eel-button-icon-before' => 'color: {{VALUE}};',
639	'{{WRAPPER}} .eel-button:hover .eel-button-icon-after' => 'color: {{VALUE}};',
640	'{{WRAPPER}} .eel-button:hover .eel-button-icon-before svg' => 'fill: {{VALUE}};',
641	'{{WRAPPER}} .eel-button:hover .eel-button-icon-after svg' => 'fill: {{VALUE}};',
642	'{{WRAPPER}} .eel-button .eel-button-icon-before i' => 'color: {{VALUE}};',
643	'{{WRAPPER}} .eel-button .eel-button-icon-after i' => 'color: {{VALUE}};',
644	'{{WRAPPER}} .eel-button .elementor-icon-wrapper' => 'color: {{VALUE}};',
645	'{{WRAPPER}} .eel-button .elementor-icon-wrapper svg' => 'fill: {{VALUE}};',
646	],
647	]
648	);
649
650	$this->add_control(
651	'icon_hover_bg',
652	[
653	'label' => esc_html__('Background', 'easy-elements'),
654	'type' => Controls_Manager::COLOR,
655	'default' => '',
656	'selectors' => [
657	'{{WRAPPER}} .eel-button:hover .eel-button-icon-before, {{WRAPPER}} .eel-button:hover .eel-button-icon-after' => 'background-color: {{VALUE}};',
658	],
659	]
660	);
661
662	$this->add_group_control(
663	\Elementor\Group_Control_Background::get_type(),
664	[
665	'name' => 'icon_hover_background',
666	'label' => esc_html__('Icon Hover Background', 'easy-elements'),
667	'types' => ['classic', 'gradient'],
668	'selector' => '{{WRAPPER}} .eel-button:hover .eel-button-icon-before, {{WRAPPER}} .eel-button:hover .eel-button-icon-after',
669	]
670	);
671
672	$this->add_responsive_control(
673	'hover_icon_rotation',
674	[
675	'label' => esc_html__('Rotation', 'easy-elements'),
676	'type' => Controls_Manager::SLIDER,
677	'size_units' => ['deg'],
678	'range' => [
679	'deg' => [
680	'min' => -360,
681	'max' => 360,
682	],
683	],
684	'default' => [
685	'unit' => 'deg',
686	'size' => 0,
687	],
688	'selectors' => [
689	'{{WRAPPER}} .eel-button:hover i' => 'transform: rotate({{SIZE}}{{UNIT}});',
690	'{{WRAPPER}} .eel-button:hover svg' => 'transform: rotate({{SIZE}}{{UNIT}});',
691	],
692	]
693	);
694	$this->end_controls_tab();
695
696	$this->end_controls_tabs();
697
698	$this->end_controls_section();
699	}
700
701	protected function render() {
702	$settings = $this->get_settings_for_display();
703
704	// Get button URL
705	$button_url = $settings['button_url']['url'] ?? '#';
706	$is_external = $settings['button_url']['is_external'] ?? false;
707	$nofollow = $settings['button_url']['nofollow'] ?? false;
708
709	// Build target attribute
710	$target = $is_external ? '_blank' : '_self';
711
712	// Build rel attribute
713	$rel = [];
714	if ($is_external) {
715	$rel[] = 'noopener';
716	}
717	if ($nofollow) {
718	$rel[] = 'nofollow';
719	}
720
721	$rel_attr = !empty($rel) ? implode(' ', array_map('sanitize_html_class', $rel)) : '';
722
723
724	// Get button classes
725	$button_classes = ['eel-button'];
726	if (!empty($settings['button_type'])) {
727	$button_classes[] = 'eel-button-' . $settings['button_type'];
728	}
729
730	if (!empty( $settings['show_gradient']) && 'yes' === $settings['show_gradient'] ) {
731	$button_classes[] = 'eel-button-gradient';
732	}
733
734	if(!empty($settings['border_gradient_button']) && 'yes' === $settings['border_gradient_button']) {
735	$button_classes[] = 'eel-button-border-gradient';
736	}
737
738	?>
739	<a href="<?php echo esc_url( $button_url ); ?>"
740	class="<?php echo esc_attr( implode(' ', $button_classes ) ); ?>"
741	target="<?php echo esc_attr( $target ); ?>"
742	<?php if ( $rel_attr ) : ?> rel="<?php echo esc_attr( $rel_attr ); ?> <?php endif; ?>">
743	<?php if (!empty($settings['button_icon']['value']) && $settings['icon_position'] === 'before'): ?>
744	<span class="eel-button-icon-before">
745	<?php \Elementor\Icons_Manager::render_icon( $settings['button_icon'], [ 'aria-hidden' => 'true' ] ); ?>
746	</span>
747	<?php endif; ?>
748
749	<span class="eel-button-text"><?php echo esc_html( $settings['button_text'] ); ?></span>
750
751	<?php if (!empty( $settings['button_icon']['value'] ) && $settings['icon_position'] === 'after'): ?>
752	<span class="eel-button-icon-after">
753	<?php \Elementor\Icons_Manager::render_icon( $settings['button_icon'], [ 'aria-hidden' => 'true' ] ); ?>
754	</span>
755	<?php endif; ?>
756	</a>
757	<?php
758	}
759	}
760