modern-button.php — Shortcodes and extra features for Phlox theme 2.17.4

auxin-elements / includes / elementor / widgets / modern-button.php

auxin-elements / includes / elementor / widgets Last commit date

theme-elements 1 year ago accordion.php 1 year ago audio.php 4 years ago before-after.php 3 years ago button.php 1 year ago carousel-navigation.php 4 years ago circle-chart.php 1 year ago contact-box.php 4 years ago contact-form.php 1 year ago custom-list.php 1 year ago divider.php 4 years ago gallery.php 1 year ago gmap.php 4 years ago heading-modern.php 1 year ago icon.php 1 year ago image.php 1 year ago mailchimp.php 1 year ago modern-button.php 1 year ago products-grid.php 1 year ago quote.php 1 year ago recent-comments.php 1 year ago recent-posts-grid-carousel.php 1 year ago recent-posts-land-style.php 1 year ago recent-posts-masonry.php 1 year ago recent-posts-tiles-carousel.php 1 year ago recent-posts-tiles.php 1 year ago recent-posts-timeline.php 1 year ago recent-products.php 1 year ago responsive-table.php 1 year ago search.php 4 years ago staff.php 1 year ago svg.php 1 year ago tabs.php 1 year ago testimonial.php 1 year ago text.php 1 year ago touch-slider.php 1 year ago video.php 4 years ago

modern-button.php

1110 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Plugin;
5	use Elementor\Widget_Base;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Typography;
8	use Elementor\Icons_Manager;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10	use Elementor\Group_Control_Background;
11	use Elementor\Group_Control_Box_Shadow;
12	use Elementor\Group_Control_Text_Shadow;
13
14
15	if ( ! defined( 'ABSPATH' ) ) {
16	exit; // Exit if accessed directly.
17	}
18
19	/**
20	* Elementor 'ModernButton' widget.
21	*
22	* Elementor widget that displays an 'ModernButton' with lightbox.
23	*
24	* @since 1.0.0
25	*/
26	class ModernButton extends Widget_Base {
27
28	/**
29	* Get widget name.
30	*
31	* Retrieve 'ModernButton' widget name.
32	*
33	* @since 1.0.0
34	* @access public
35	*
36	* @return string Widget name.
37	*/
38	public function get_name() {
39	return 'aux_modern_button';
40	}
41
42	/**
43	* Get widget title.
44	*
45	* Retrieve 'ModernButton' widget title.
46	*
47	* @since 1.0.0
48	* @access public
49	*
50	* @return string Widget title.
51	*/
52	public function get_title() {
53	return __('Modern Button', 'auxin-elements' );
54	}
55
56	/**
57	* Get widget icon.
58	*
59	* Retrieve 'ModernButton' widget icon.
60	*
61	* @since 1.0.0
62	* @access public
63	*
64	* @return string Widget icon.
65	*/
66	public function get_icon() {
67	return 'eicon-button auxin-badge';
68	}
69
70	/**
71	* Get widget categories.
72	*
73	* Retrieve 'ModernButton' widget icon.
74	*
75	* @since 1.0.0
76	* @access public
77	*
78	* @return string Widget icon.
79	*/
80	public function get_categories() {
81	return [ 'auxin-core' ];
82	}
83
84	/**
85	* Register 'ModernButton' widget controls.
86	*
87	* Adds different input fields to allow the user to change and customize the widget settings.
88	*
89	* @since 1.0.0
90	* @access protected
91	*/
92	protected function register_controls() {
93
94	/-----------------------------------------------------------------------------------/
95	/* Button
96	/-----------------------------------------------------------------------------------/
97
98	$this->start_controls_section(
99	'button_section',
100	[
101	'label' => __('Button', 'auxin-elements' ),
102	]
103	);
104
105	$this->add_control(
106	'label',
107	[
108	'label' => __('Text','auxin-elements' ),
109	'type' => Controls_Manager::TEXT,
110	'default' => __('Click Here','auxin-elements' )
111	]
112	);
113
114	$this->add_control(
115	'label2',
116	[
117	'label' => __('Highlighted Text', 'auxin-elements' ),
118	'type' => Controls_Manager::TEXT,
119	'default' => ''
120	]
121	);
122
123	$this->add_control(
124	'label3',
125	[
126	'label' => __('After Text', 'auxin-elements' ),
127	'type' => Controls_Manager::TEXT,
128	'default' => ''
129	]
130	);
131
132	$this->add_control(
133	'vertical_align',
134	[
135	'label' => __( 'Text Vertical Align', 'auxin-elements' ),
136	'type' => Controls_Manager::CHOOSE,
137	'options' => [
138	'top' => [
139	'title' => __( 'Top', 'auxin-elements' ),
140	'icon' => 'eicon-v-align-top',
141	],
142	'center' => [
143	'title' => __( 'Center', 'auxin-elements' ),
144	'icon' => 'eicon-v-align-middle',
145	],
146	'bottom' => [
147	'title' => __( 'Bottom', 'auxin-elements' ),
148	'icon' => 'eicon-v-align-bottom',
149	],
150	],
151	'selectors' => [
152	'{{WRAPPER}} .aux-text' => 'display:flex; align-items:{{VALUE}};'
153	],
154	'selectors_dictionary' => [
155	'top' => 'flex-start',
156	'bottom' => 'flex-end'
157	],
158	'conditions' => [
159	'relation' => 'or',
160	'terms' => [
161	[
162	'name' => 'label2',
163	'operator' => '!==',
164	'value' => ''
165	],
166	[
167	'name' => 'label3',
168	'operator' => '!==',
169	'value' => ''
170	]
171	]
172	],
173	'default' => ''
174	]
175	);
176
177	$this->add_responsive_control(
178	'btn_align',
179	[
180	'label' => __( 'Alignment', 'auxin-elements' ),
181	'type' => Controls_Manager::CHOOSE,
182	'options' => [
183	'left' => [
184	'title' => __( 'Left', 'auxin-elements' ),
185	'icon' => 'eicon-text-align-left',
186	],
187	'center' => [
188	'title' => __( 'Center', 'auxin-elements' ),
189	'icon' => 'eicon-text-align-center',
190	],
191	'right' => [
192	'title' => __( 'Right', 'auxin-elements' ),
193	'icon' => 'eicon-text-align-right',
194	],
195	'justify' => [
196	'title' => __( 'Justified', 'auxin-elements' ),
197	'icon' => 'eicon-text-align-justify',
198	]
199	],
200	'default' => 'left',
201	'selectors' => [
202	'{{WRAPPER}} .aux-modern-button-wrapper' => 'text-align:{{VALUE}};',
203	]
204	]
205	);
206
207	$this->add_control(
208	'link',
209	[
210	'label' => __('Link','auxin-elements' ),
211	'type' => Controls_Manager::URL,
212	'placeholder' => 'https://your-link.com',
213	'show_external' => true,
214	'dynamic' => [
215	'active' => true
216	]
217	]
218	);
219
220	$this->add_control(
221	'link_css_id',
222	array(
223	'label' => __('Link CSS ID','auxin-elements' ),
224	'type' => Controls_Manager::TEXT,
225	'placeholder' => 'Css ID for anchor tag',
226	'label_block' => true,
227	)
228	);
229
230	$this->add_control(
231	'open_video_in_lightbox',
232	array(
233	'label' => __('Open Video in Lightbox','auxin-elements' ),
234	'description' => __( 'To use this option, the above link option should be a video', 'auxin-elements' ),
235	'type' => Controls_Manager::SWITCHER,
236	'label_on' => __( 'On', 'auxin-elements' ),
237	'label_off' => __( 'Off', 'auxin-elements' ),
238	'return_value' => 'yes',
239	'default' => ''
240	)
241	);
242
243	$this->add_control(
244	'icon_display',
245	[
246	'label' => __( 'Display Icon', 'auxin-elements' ),
247	'type' => Controls_Manager::SWITCHER,
248	'label_on' => __( 'On', 'auxin-elements' ),
249	'label_off' => __( 'Off', 'auxin-elements' ),
250	'return_value' => 'yes',
251	'default' => 'no',
252	'separator' => 'before'
253	]
254	);
255
256	$this->add_control(
257	'icon',
258	[
259	'type' => Controls_Manager::ICONS,
260	'default' => [
261	'value' => 'auxicon-arrow-down',
262	'library' => 'auxicon'
263	],
264	'condition' => [
265	'icon_display' => 'yes'
266	],
267	]
268	);
269
270	$this->end_controls_section();
271
272	/-----------------------------------------------------------------------------------/
273	/* Button Style Section
274	/-----------------------------------------------------------------------------------/
275
276	$this->start_controls_section(
277	'section_style_btn',
278	[
279	'label' => __('Button', 'auxin-elements' ),
280	'tab' => Controls_Manager::TAB_STYLE,
281	]
282	);
283
284	$this->add_control(
285	'btn_type',
286	[
287	'label' => __('Type', 'auxin-elements'),
288	'type' => Controls_Manager::SELECT,
289	'default' => 'default',
290	'options' => [
291	'default' => __('Default', 'auxin-elements' ),
292	'outline' => __('Outline' , 'auxin-elements' ),
293	]
294	]
295	);
296
297	$this->add_control(
298	'btn_shape',
299	[
300	'label' => __('Shape', 'auxin-elements'),
301	'type' => Controls_Manager::SELECT,
302	'default' => 'normal',
303	'options' => [
304	'normal' => __('Normal', 'auxin-elements' ),
305	'round' => __('Round' , 'auxin-elements' ),
306	'curve' => __('Curve' , 'auxin-elements' ),
307	]
308	]
309	);
310
311	$this->add_control(
312	'btn_size',
313	[
314	'label' => __('Size', 'auxin-elements'),
315	'type' => Controls_Manager::SELECT,
316	'default' => 'md',
317	'options' => [
318	'xl' => __('Exlarge', 'auxin-elements' ),
319	'lg' => __('Large' , 'auxin-elements' ),
320	'md' => __('Medium' , 'auxin-elements' ),
321	'sm' => __('Small' , 'auxin-elements' ),
322	'xs' => __('Tiny' , 'auxin-elements' )
323	]
324	]
325	);
326
327	$this->add_control(
328	'btn_skin',
329	[
330	'label' => __('Skin', 'auxin-elements'),
331	'label_block' => false,
332	'type' => 'aux-visual-select',
333	'default' => 'black',
334	'options' =>[
335	'black' => [
336	'label' => __('black', 'auxin-elements'),
337	'css_class' => 'aux-color-selector aux-button aux-visual-selector-black'
338	],
339	'white' => [
340	'label' => __('White', 'auxin-elements'),
341	'css_class' => 'aux-color-selector aux-button aux-visual-selector-white'
342	],
343	'info' => [
344	'label' => __('Ball Blue', 'auxin-elements'),
345	'css_class' => 'aux-color-selector aux-button aux-visual-selector-ball-blue'
346	],
347	'warning' => [
348	'label' => __('Mikado Yellow', 'auxin-elements'),
349	'css_class' => 'aux-color-selector aux-button aux-visual-selector-mikado-yellow'
350	],
351	'caution' => [
352	'label' => __('Carmine Pink', 'auxin-elements'),
353	'css_class' => 'aux-color-selector aux-button aux-visual-selector-carmine-pink'
354	]
355	]
356	]
357	);
358
359	$this->start_controls_tabs( 'btn_styles' );
360
361	$this->start_controls_tab(
362	'btn_normal',
363	[
364	'label' => __( 'Normal' , 'auxin-elements' )
365	]
366	);
367
368	$this->add_group_control(
369	Group_Control_Background::get_type(),
370	[
371	'name' => 'btn_bg_normal',
372	'label' => __( 'Background', 'auxin-elements' ),
373	'types' => [ 'classic', 'gradient' ],
374	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:before, {{WRAPPER}} .aux-modern-button .aux-overlay:before'
375	]
376	);
377
378	$this->add_group_control(
379	Group_Control_Box_Shadow::get_type(),
380	[
381	'name' => 'btn_box_shadow_normal',
382	'selector' => '{{WRAPPER}} .aux-overlay:before, {{WRAPPER}} .aux-overlay:after'
383	]
384	);
385
386	$this->add_responsive_control(
387	'btn_padding_normal',
388	[
389	'label' => __( 'Padding', 'auxin-elements' ),
390	'type' => Controls_Manager::DIMENSIONS,
391	'size_units' => [ 'px', '%' ],
392	'selectors' => [
393	'{{WRAPPER}} .aux-modern-button' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
394	]
395	]
396	);
397
398	$this->add_responsive_control(
399	'btn_border_radius_normal',
400	[
401	'label' => __( 'Border Radius', 'auxin-elements' ),
402	'type' => Controls_Manager::DIMENSIONS,
403	'size_units' => [ 'px', 'em', '%' ],
404	'allowed_dimensions' => 'all',
405	'separator' => 'before',
406	'selectors' => [
407	'{{WRAPPER}} .aux-overlay:before, {{WRAPPER}} .aux-overlay:after' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
408	]
409	]
410	);
411
412	$this->end_controls_tab();
413
414	$this->start_controls_tab(
415	'button_hover',
416	[
417	'label' => __( 'Hover' , 'auxin-elements' )
418	]
419	);
420
421	$this->add_group_control(
422	Group_Control_Background::get_type(),
423	[
424	'name' => 'btn_bg_hover',
425	'label' => __( 'Background', 'auxin-elements' ),
426	'types' => [ 'classic', 'gradient' ],
427	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:after, {{WRAPPER}} .aux-modern-button .aux-overlay:after'
428	]
429	);
430
431	$this->add_group_control(
432	Group_Control_Box_Shadow::get_type(),
433	[
434	'name' => 'btn_box_shadow_hover',
435	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-overlay:before, {{WRAPPER}} .aux-modern-button:hover .aux-overlay:after'
436	]
437	);
438
439	$this->add_responsive_control(
440	'btn_padding_hover',
441	[
442	'label' => __( 'Padding', 'auxin-elements' ),
443	'type' => Controls_Manager::DIMENSIONS,
444	'size_units' => [ 'px', '%' ],
445	'selectors' => [
446	'{{WRAPPER}} .aux-modern-button:hover' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
447	]
448	]
449	);
450
451	$this->add_responsive_control(
452	'btn_border_radius_hover',
453	[
454	'label' => __( 'Border Radius', 'auxin-elements' ),
455	'type' => Controls_Manager::DIMENSIONS,
456	'size_units' => [ 'px', 'em', '%' ],
457	'allowed_dimensions' => 'all',
458	'separator' => 'before',
459	'selectors' => [
460	'{{WRAPPER}} .aux-modern-button:hover .aux-overlay:before, {{WRAPPER}} .aux-modern-button:hover .aux-overlay:after' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
461	]
462	]
463	);
464
465	$this->end_controls_tab();
466
467	$this->end_controls_tabs();
468
469	$this->end_controls_section();
470
471	/-----------------------------------------------------------------------------------/
472	/* Label Style Section
473	/-----------------------------------------------------------------------------------/
474
475	$this->start_controls_section(
476	'section_style_text',
477	[
478	'label' => __('Text', 'auxin-elements' ),
479	'tab' => Controls_Manager::TAB_STYLE
480	]
481	);
482
483
484	$this->start_controls_tabs( 'text_styles' );
485
486	$this->start_controls_tab(
487	'text_normal',
488	[
489	'label' => __( 'Normal' , 'auxin-elements' )
490	]
491	);
492
493	$this->add_group_control(
494	Group_Control_Typography::get_type(),
495	[
496	'name' => 'text_normal_typo',
497	'global' => [
498	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
499	],
500	'selector' => '{{WRAPPER}} .aux-text'
501	]
502	);
503
504	$this->add_control(
505	'text_normal_color',
506	[
507	'label' => __( 'Color', 'auxin-elements' ),
508	'type' => Controls_Manager::COLOR,
509	'selectors' => [
510	'{{WRAPPER}} .aux-text' => 'color: {{VALUE}};'
511	]
512	]
513
514	);
515
516	$this->add_group_control(
517	Group_Control_Text_Shadow::get_type(),
518	[
519	'name' => 'text_normal_text_shadow',
520	'label' => __( 'Text Shadow', 'auxin-elements' ),
521	'selector' => '{{WRAPPER}} .aux-text'
522	]
523	);
524
525	$this->end_controls_tab();
526
527	$this->start_controls_tab(
528	'text_hover',
529	[
530	'label' => __( 'Hover' , 'auxin-elements' )
531	]
532	);
533
534	$this->add_group_control(
535	Group_Control_Typography::get_type(),
536	[
537	'name' => 'text_hover_typo',
538	'global' => [
539	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
540	],
541	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
542	]
543	);
544
545	$this->add_control(
546	'text_hover_color',
547	[
548	'label' => __( 'Color', 'auxin-elements' ),
549	'type' => Controls_Manager::COLOR,
550	'selectors' => [
551	'{{WRAPPER}} .aux-modern-button:hover .aux-text' => 'color:{{VALUE}};'
552	]
553	]
554	);
555
556	$this->add_group_control(
557	Group_Control_Text_Shadow::get_type(),
558	[
559	'name' => 'text_hover_text_shadow',
560	'label' => __( 'Text Shadow', 'auxin-elements' ),
561	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
562	]
563	);
564
565	$this->end_controls_tab();
566
567	$this->end_controls_tabs();
568
569	$this->end_controls_section();
570
571
572	/-----------------------------------------------------------------------------------/
573	/* Label Highlighted Style Section
574	/-----------------------------------------------------------------------------------/
575
576	$this->start_controls_section(
577	'section_style_text2',
578	[
579	'label' => __('Highlighted Text', 'auxin-elements' ),
580	'tab' => Controls_Manager::TAB_STYLE,
581	'condition' => [
582	'label2!' => ''
583	]
584	]
585	);
586
587
588	$this->start_controls_tabs( 'text2_styles' );
589
590	$this->start_controls_tab(
591	'text2_normal',
592	[
593	'label' => __( 'Normal' , 'auxin-elements' )
594	]
595	);
596
597	$this->add_group_control(
598	Group_Control_Typography::get_type(),
599	[
600	'name' => 'text2_normal_typo',
601	'global' => [
602	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
603	],
604	'selector' => '{{WRAPPER}} .aux-text-highlighted'
605	]
606	);
607
608	$this->add_control(
609	'text2_normal_color',
610	[
611	'label' => __( 'Color', 'auxin-elements' ),
612	'type' => Controls_Manager::COLOR,
613	'selectors' => [
614	'{{WRAPPER}} .aux-text-highlighted' => 'color: {{VALUE}};'
615	]
616	]
617
618	);
619
620	$this->add_group_control(
621	Group_Control_Text_Shadow::get_type(),
622	[
623	'name' => 'text2_normal_text_shadow',
624	'label' => __( 'Text Shadow', 'auxin-elements' ),
625	'selector' => '{{WRAPPER}} .aux-text-highlighted'
626	]
627	);
628
629	$this->end_controls_tab();
630
631	$this->start_controls_tab(
632	'text2_hover',
633	[
634	'label' => __( 'Hover' , 'auxin-elements' )
635	]
636	);
637
638	$this->add_group_control(
639	Group_Control_Typography::get_type(),
640	[
641	'name' => 'text2_hover_typo',
642	'global' => [
643	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
644	],
645	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted'
646	]
647	);
648
649	$this->add_control(
650	'text2_hover_color',
651	[
652	'label' => __( 'Color', 'auxin-elements' ),
653	'type' => Controls_Manager::COLOR,
654	'selectors' => [
655	'{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted' => 'color:{{VALUE}};'
656	]
657	]
658	);
659
660	$this->add_group_control(
661	Group_Control_Text_Shadow::get_type(),
662	[
663	'name' => 'text2_hover_text_shadow',
664	'label' => __( 'Text Shadow', 'auxin-elements' ),
665	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted'
666	]
667	);
668
669	$this->end_controls_tab();
670
671	$this->end_controls_tabs();
672
673	$this->add_responsive_control(
674	'text2_margin',
675	[
676	'label' => __( 'Margin', 'auxin-elements' ),
677	'type' => Controls_Manager::DIMENSIONS,
678	'size_units' => [ 'px', 'em', '%' ],
679	'selectors' => [
680	'{{WRAPPER}} .aux-text-highlighted' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
681	],
682	'separator' => 'before'
683	]
684	);
685
686	$this->end_controls_section();
687
688	/-----------------------------------------------------------------------------------/
689	/* Label After Style Section
690	/-----------------------------------------------------------------------------------/
691
692	$this->start_controls_section(
693	'section_style_text3',
694	[
695	'label' => __('After Text', 'auxin-elements' ),
696	'tab' => Controls_Manager::TAB_STYLE,
697	'condition' => [
698	'label3!' => ''
699	]
700	]
701	);
702
703
704	$this->start_controls_tabs( 'text3_styles' );
705
706	$this->start_controls_tab(
707	'text3_normal',
708	[
709	'label' => __( 'Normal' , 'auxin-elements' )
710	]
711	);
712
713	$this->add_group_control(
714	Group_Control_Typography::get_type(),
715	[
716	'name' => 'text3_normal_typo',
717	'global' => [
718	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
719	],
720	'selector' => '{{WRAPPER}} .aux-text-after'
721	]
722	);
723
724	$this->add_control(
725	'text3_normal_color',
726	[
727	'label' => __( 'Color', 'auxin-elements' ),
728	'type' => Controls_Manager::COLOR,
729	'selectors' => [
730	'{{WRAPPER}} .aux-text-after' => 'color: {{VALUE}};'
731	]
732	]
733
734	);
735
736	$this->add_group_control(
737	Group_Control_Text_Shadow::get_type(),
738	[
739	'name' => 'text3_normal_text_shadow',
740	'label' => __( 'Text Shadow', 'auxin-elements' ),
741	'selector' => '{{WRAPPER}} .aux-text-after'
742	]
743	);
744
745	$this->end_controls_tab();
746
747	$this->start_controls_tab(
748	'text3_hover',
749	[
750	'label' => __( 'Hover' , 'auxin-elements' )
751	]
752	);
753
754	$this->add_group_control(
755	Group_Control_Typography::get_type(),
756	[
757	'name' => 'text3_hover_typo',
758	'global' => [
759	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
760	],
761	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-after'
762	]
763	);
764
765	$this->add_control(
766	'text3_hover_color',
767	[
768	'label' => __( 'Color', 'auxin-elements' ),
769	'type' => Controls_Manager::COLOR,
770	'selectors' => [
771	'{{WRAPPER}} .aux-modern-button:hover .aux-text-after' => 'color:{{VALUE}};'
772	]
773	]
774	);
775
776	$this->add_group_control(
777	Group_Control_Text_Shadow::get_type(),
778	[
779	'name' => 'text3_hover_text_shadow',
780	'label' => __( 'Text Shadow', 'auxin-elements' ),
781	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-after'
782	]
783	);
784
785	$this->end_controls_tab();
786
787	$this->end_controls_tabs();
788
789	$this->add_responsive_control(
790	'text3_margin',
791	[
792	'label' => __( 'Margin', 'auxin-elements' ),
793	'type' => Controls_Manager::DIMENSIONS,
794	'size_units' => [ 'px', 'em', '%' ],
795	'selectors' => [
796	'{{WRAPPER}} .aux-text-after' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
797	],
798	'separator' => 'before'
799	]
800	);
801
802	$this->end_controls_section();
803
804	/-----------------------------------------------------------------------------------/
805	/* Button Style Section
806	/-----------------------------------------------------------------------------------/
807
808	$this->start_controls_section(
809	'section_style_icon',
810	[
811	'label' => __('Icon', 'auxin-elements' ),
812	'tab' => Controls_Manager::TAB_STYLE,
813	'condition' => [
814	'icon_display' => 'yes'
815	]
816	]
817	);
818
819	$this->add_control(
820	'icon_align',
821	[
822	'label' => __('Alignment', 'auxin-elements'),
823	'type' => Controls_Manager::SELECT,
824	'default' => 'left',
825	'options' => [
826	'top' => __('Over', 'auxin-elements' ),
827	'bottom' => __('Below', 'auxin-elements' ),
828	'left' => __('Left', 'auxin-elements' ),
829	'right' => __('Right', 'auxin-elements' ),
830	]
831	]
832	);
833
834	$this->start_controls_tabs( 'icon_styles' );
835
836	$this->start_controls_tab(
837	'icon_normal',
838	[
839	'label' => __( 'Normal' , 'auxin-elements' )
840	]
841	);
842
843	$this->add_responsive_control(
844	'icon_normal_size',
845	[
846	'label' => __( 'Size', 'auxin-elements' ),
847	'type' => Controls_Manager::SLIDER,
848	'size_units' => [ 'px', '%' ],
849	'range' => [
850	'px' => [
851	'min' => 10,
852	'max' => 512,
853	'step' => 2,
854	],
855	'%' => [
856	'min' => 0,
857	'max' => 100,
858	],
859	],
860	'selectors' => [
861	'{{WRAPPER}} .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
862	]
863	]
864	);
865
866	$this->add_control(
867	'icon_normal_color',
868	[
869	'label' => __( 'Color', 'auxin-elements' ),
870	'type' => Controls_Manager::COLOR,
871	'selectors' => [
872	'{{WRAPPER}} .aux-icon' => 'color: {{VALUE}};',
873	]
874	]
875	);
876
877	$this->add_group_control(
878	Group_Control_Background::get_type(),
879	[
880	'name' => 'icon_normal_bg',
881	'label' => __( 'Background', 'auxin-elements' ),
882	'types' => [ 'classic', 'gradient' ],
883	'selector' => '{{WRAPPER}} .aux-icon:before',
884	]
885	);
886
887	$this->add_group_control(
888	Group_Control_Box_Shadow::get_type(),
889	[
890	'name' => 'icon_normal_box_shadow',
891	'selector' => '{{WRAPPER}} .aux-icon'
892	]
893	);
894
895	$this->add_responsive_control(
896	'icon_normal_margin',
897	[
898	'label' => __( 'Margin', 'auxin-elements' ),
899	'type' => Controls_Manager::DIMENSIONS,
900	'size_units' => [ 'px', '%' ],
901	'selectors' => [
902	'{{WRAPPER}} .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
903	]
904	]
905	);
906
907	$this->add_responsive_control(
908	'icon_normal_padding',
909	[
910	'label' => __( 'Padding', 'auxin-elements' ),
911	'type' => Controls_Manager::DIMENSIONS,
912	'size_units' => [ 'px', '%' ],
913	'selectors' => [
914	'{{WRAPPER}} .aux-icon' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
915	]
916	]
917	);
918
919	$this->add_responsive_control(
920	'icon_normal_border_radius',
921	[
922	'label' => __( 'Border Radius', 'auxin-elements' ),
923	'type' => Controls_Manager::DIMENSIONS,
924	'size_units' => [ 'px', 'em', '%' ],
925	'allowed_dimensions' => 'all',
926	'separator' => 'before',
927	'selectors' => [
928	'{{WRAPPER}} .aux-icon' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
929	],
930	]
931	);
932
933	$this->end_controls_tab();
934
935	$this->start_controls_tab(
936	'icon_hover',
937	[
938	'label' => __( 'Hover' , 'auxin-elements' )
939	]
940	);
941
942	$this->add_responsive_control(
943	'icon_hover_size',
944	[
945	'label' => __( 'Size', 'auxin-elements' ),
946	'type' => Controls_Manager::SLIDER,
947	'size_units' => [ 'px', '%' ],
948	'range' => [
949	'px' => [
950	'min' => 10,
951	'max' => 512,
952	'step' => 2,
953	],
954	'%' => [
955	'min' => 0,
956	'max' => 100,
957	],
958	],
959	'selectors' => [
960	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
961	]
962	]
963	);
964
965	$this->add_control(
966	'icon_hover_color',
967	[
968	'label' => __( 'Color', 'auxin-elements' ),
969	'type' => Controls_Manager::COLOR,
970	'selectors' => [
971	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'color: {{VALUE}};',
972	]
973	]
974	);
975
976	$this->add_group_control(
977	Group_Control_Background::get_type(),
978	[
979	'name' => 'icon_hover_bg',
980	'label' => __( 'Background', 'auxin-elements' ),
981	'types' => [ 'classic', 'gradient' ],
982	'selector' => '{{WRAPPER}} .aux-icon:after',
983	]
984	);
985
986	$this->add_group_control(
987	Group_Control_Box_Shadow::get_type(),
988	[
989	'name' => 'icon_hover_box_shadow',
990	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-icon'
991	]
992	);
993
994	$this->add_responsive_control(
995	'icon_hover_margin',
996	[
997	'label' => __( 'Margin', 'auxin-elements' ),
998	'type' => Controls_Manager::DIMENSIONS,
999	'size_units' => [ 'px', '%' ],
1000	'selectors' => [
1001	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1002	]
1003	]
1004	);
1005
1006	$this->add_responsive_control(
1007	'icon_hover_padding',
1008	[
1009	'label' => __( 'Padding', 'auxin-elements' ),
1010	'type' => Controls_Manager::DIMENSIONS,
1011	'size_units' => [ 'px', '%' ],
1012	'selectors' => [
1013	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1014	]
1015	]
1016	);
1017
1018	$this->add_responsive_control(
1019	'icon_hover_border_radius',
1020	[
1021	'label' => __( 'Border Radius', 'auxin-elements' ),
1022	'type' => Controls_Manager::DIMENSIONS,
1023	'size_units' => [ 'px', 'em', '%' ],
1024	'allowed_dimensions' => 'all',
1025	'separator' => 'before',
1026	'selectors' => [
1027	'{{WRAPPER}} .aux-icon:hover' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1028	],
1029	]
1030	);
1031
1032	$this->end_controls_tab();
1033
1034	$this->end_controls_tabs();
1035
1036	$this->end_controls_section();
1037	}
1038
1039	/**
1040	* Render image box widget output on the frontend.
1041	*
1042	* Written in PHP and used to generate the final HTML.
1043	*
1044	* @since 1.0.0
1045	* @access protected
1046	*/
1047	protected function render() {
1048
1049	$url = '';
1050	$settings = $this->get_settings_for_display();
1051
1052	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-wrapper' );
1053	$settings['btn_align'] = $settings['btn_align'] ?? 'left';
1054	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-align-' . $settings['btn_align'] );
1055
1056	$this->add_render_attribute( 'button', 'class', 'aux-modern-button' );
1057	$this->add_render_attribute( 'button', 'class', 'aux-' . $settings['btn_skin'] );
1058	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_size'] );
1059	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_shape'] );
1060	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_type'] );
1061	$this->add_render_attribute( 'button', 'class', 'aux-icon-' . $settings['icon_align'] );
1062
1063
1064	if ( ! empty( $settings['link']['url'] ) ) {
1065	$this->add_link_attributes( 'button', $settings['link'] );
1066	$url = $settings['link']['url'];
1067	}
1068
1069	if ( $settings['link_css_id'] ) {
1070	$this->add_render_attribute( 'button', 'id', $settings['link_css_id'] );
1071	}
1072
1073	?>
1074	<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?> >
1075	<?php
1076	if ( auxin_is_true( $settings['open_video_in_lightbox'] ) && strlen( $url ) > 3 ) { // disable lighbox if anchor is set
1077
1078	$this->add_render_attribute( 'button', 'class', 'aux-open-video' );
1079	$this->add_render_attribute( 'button', 'data-type', 'video' );
1080
1081	echo '<span class="aux-lightbox-video ">';
1082	}
1083	?>
1084	<a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
1085	<div class="aux-overlay"></div>
1086	<?php if ( $settings['icon_display'] ) { ;?>
1087	<div class="aux-icon ">
1088	<?php Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] );?>
1089	</div>
1090	<?php };?>
1091	<div class="aux-text">
1092	<?php
1093	if( ! empty( $settings['label'] ) ){ printf( '<span class="aux-text-before">%s</span>', wp_kses_post( do_shortcode( $settings['label'] ) ) ); }
1094	if( ! empty( $settings['label2'] ) ){ printf( '<span class="aux-text-highlighted">%s</span>', wp_kses_post( do_shortcode( $settings['label2'] ) ) ); }
1095	if( ! empty( $settings['label3'] ) ){ printf( '<span class="aux-text-after">%s</span>', wp_kses_post( do_shortcode( $settings['label3'] ) ) ); }
1096	?>
1097	</div>
1098	</a>
1099	<?php
1100	if ( auxin_is_true( $settings['open_video_in_lightbox'] ) ) {
1101	echo '</span>';
1102	}
1103	?>
1104
1105	</div>
1106
1107	<?php
1108	}
1109
1110	}