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

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

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

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

modern-button.php

1083 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\Schemes\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' => __('','auxin-elements' )
120	]
121	);
122
123	$this->add_control(
124	'label3',
125	[
126	'label' => __('After Text', 'auxin-elements' ),
127	'type' => Controls_Manager::TEXT,
128	'default' => __('','auxin-elements' )
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	'open_video_in_lightbox',
222	array(
223	'label' => __('Open Video in Lightbox','auxin-elements' ),
224	'description' => __( 'To use this option, the above link option should be a video', 'auxin-elements' ),
225	'type' => Controls_Manager::SWITCHER,
226	'label_on' => __( 'On', 'auxin-elements' ),
227	'label_off' => __( 'Off', 'auxin-elements' ),
228	'return_value' => 'yes',
229	'default' => ''
230	)
231	);
232
233	$this->add_control(
234	'icon_display',
235	[
236	'label' => __( 'Display Icon', 'auxin-elements' ),
237	'type' => Controls_Manager::SWITCHER,
238	'label_on' => __( 'On', 'auxin-elements' ),
239	'label_off' => __( 'Off', 'auxin-elements' ),
240	'return_value' => 'yes',
241	'default' => 'no',
242	'separator' => 'before'
243	]
244	);
245
246	$this->add_control(
247	'icon',
248	[
249	'type' => Controls_Manager::ICONS,
250	'default' => [
251	'value' => 'auxicon-arrow-down',
252	'library' => 'auxicon'
253	],
254	'condition' => [
255	'icon_display' => 'yes'
256	],
257	]
258	);
259
260	$this->end_controls_section();
261
262	/-----------------------------------------------------------------------------------/
263	/* Button Style Section
264	/-----------------------------------------------------------------------------------/
265
266	$this->start_controls_section(
267	'section_style_btn',
268	[
269	'label' => __('Button', 'auxin-elements' ),
270	'tab' => Controls_Manager::TAB_STYLE,
271	]
272	);
273
274	$this->add_control(
275	'btn_type',
276	[
277	'label' => __('Type', 'auxin-elements'),
278	'type' => Controls_Manager::SELECT,
279	'default' => 'default',
280	'options' => [
281	'default' => __('Default', 'auxin-elements' ),
282	'outline' => __('Outline' , 'auxin-elements' ),
283	]
284	]
285	);
286
287	$this->add_control(
288	'btn_shape',
289	[
290	'label' => __('Shape', 'auxin-elements'),
291	'type' => Controls_Manager::SELECT,
292	'default' => 'normal',
293	'options' => [
294	'normal' => __('Normal', 'auxin-elements' ),
295	'round' => __('Round' , 'auxin-elements' ),
296	'curve' => __('Curve' , 'auxin-elements' ),
297	]
298	]
299	);
300
301	$this->add_control(
302	'btn_size',
303	[
304	'label' => __('Size', 'auxin-elements'),
305	'type' => Controls_Manager::SELECT,
306	'default' => 'md',
307	'options' => [
308	'xl' => __('Exlarge', 'auxin-elements' ),
309	'lg' => __('Large' , 'auxin-elements' ),
310	'md' => __('Medium' , 'auxin-elements' ),
311	'sm' => __('Small' , 'auxin-elements' ),
312	'xs' => __('Tiny' , 'auxin-elements' )
313	]
314	]
315	);
316
317	$this->add_control(
318	'btn_skin',
319	[
320	'label' => __('Skin', 'auxin-elements'),
321	'label_block' => false,
322	'type' => 'aux-visual-select',
323	'default' => 'black',
324	'options' =>[
325	'black' => [
326	'label' => __('black', 'auxin-elements'),
327	'css_class' => 'aux-color-selector aux-button aux-visual-selector-black'
328	],
329	'white' => [
330	'label' => __('White', 'auxin-elements'),
331	'css_class' => 'aux-color-selector aux-button aux-visual-selector-white'
332	],
333	'info' => [
334	'label' => __('Ball Blue', 'auxin-elements'),
335	'css_class' => 'aux-color-selector aux-button aux-visual-selector-ball-blue'
336	],
337	'warning' => [
338	'label' => __('Mikado Yellow', 'auxin-elements'),
339	'css_class' => 'aux-color-selector aux-button aux-visual-selector-mikado-yellow'
340	],
341	'caution' => [
342	'label' => __('Carmine Pink', 'auxin-elements'),
343	'css_class' => 'aux-color-selector aux-button aux-visual-selector-carmine-pink'
344	]
345	]
346	]
347	);
348
349	$this->start_controls_tabs( 'btn_styles' );
350
351	$this->start_controls_tab(
352	'btn_normal',
353	[
354	'label' => __( 'Normal' , 'auxin-elements' )
355	]
356	);
357
358	$this->add_group_control(
359	Group_Control_Background::get_type(),
360	[
361	'name' => 'btn_bg_normal',
362	'label' => __( 'Background', 'auxin-elements' ),
363	'types' => [ 'classic', 'gradient' ],
364	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:before, {{WRAPPER}} .aux-modern-button .aux-overlay:before'
365	]
366	);
367
368	$this->add_group_control(
369	Group_Control_Box_Shadow::get_type(),
370	[
371	'name' => 'btn_box_shadow_normal',
372	'selector' => '{{WRAPPER}} .aux-overlay:before, {{WRAPPER}} .aux-overlay:after'
373	]
374	);
375
376	$this->add_responsive_control(
377	'btn_padding_normal',
378	[
379	'label' => __( 'Padding', 'auxin-elements' ),
380	'type' => Controls_Manager::DIMENSIONS,
381	'size_units' => [ 'px', '%' ],
382	'selectors' => [
383	'{{WRAPPER}} .aux-modern-button' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
384	]
385	]
386	);
387
388	$this->add_responsive_control(
389	'btn_border_radius_normal',
390	[
391	'label' => __( 'Border Radius', 'auxin-elements' ),
392	'type' => Controls_Manager::DIMENSIONS,
393	'size_units' => [ 'px', 'em', '%' ],
394	'allowed_dimensions' => 'all',
395	'separator' => 'before',
396	'selectors' => [
397	'{{WRAPPER}} .aux-overlay:before, {{WRAPPER}} .aux-overlay:after' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
398	]
399	]
400	);
401
402	$this->end_controls_tab();
403
404	$this->start_controls_tab(
405	'button_hover',
406	[
407	'label' => __( 'Hover' , 'auxin-elements' )
408	]
409	);
410
411	$this->add_group_control(
412	Group_Control_Background::get_type(),
413	[
414	'name' => 'btn_bg_hover',
415	'label' => __( 'Background', 'auxin-elements' ),
416	'types' => [ 'classic', 'gradient' ],
417	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:after, {{WRAPPER}} .aux-modern-button .aux-overlay:after'
418	]
419	);
420
421	$this->add_group_control(
422	Group_Control_Box_Shadow::get_type(),
423	[
424	'name' => 'btn_box_shadow_hover',
425	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-overlay:before, {{WRAPPER}} .aux-modern-button:hover .aux-overlay:after'
426	]
427	);
428
429	$this->add_responsive_control(
430	'btn_padding_hover',
431	[
432	'label' => __( 'Padding', 'auxin-elements' ),
433	'type' => Controls_Manager::DIMENSIONS,
434	'size_units' => [ 'px', '%' ],
435	'selectors' => [
436	'{{WRAPPER}} .aux-modern-button:hover' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
437	]
438	]
439	);
440
441	$this->add_responsive_control(
442	'btn_border_radius_hover',
443	[
444	'label' => __( 'Border Radius', 'auxin-elements' ),
445	'type' => Controls_Manager::DIMENSIONS,
446	'size_units' => [ 'px', 'em', '%' ],
447	'allowed_dimensions' => 'all',
448	'separator' => 'before',
449	'selectors' => [
450	'{{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}};'
451	]
452	]
453	);
454
455	$this->end_controls_tab();
456
457	$this->end_controls_tabs();
458
459	$this->end_controls_section();
460
461	/-----------------------------------------------------------------------------------/
462	/* Label Style Section
463	/-----------------------------------------------------------------------------------/
464
465	$this->start_controls_section(
466	'section_style_text',
467	[
468	'label' => __('Text', 'auxin-elements' ),
469	'tab' => Controls_Manager::TAB_STYLE
470	]
471	);
472
473
474	$this->start_controls_tabs( 'text_styles' );
475
476	$this->start_controls_tab(
477	'text_normal',
478	[
479	'label' => __( 'Normal' , 'auxin-elements' )
480	]
481	);
482
483	$this->add_group_control(
484	Group_Control_Typography::get_type(),
485	[
486	'name' => 'text_normal_typo',
487	'scheme' => Typography::TYPOGRAPHY_1,
488	'selector' => '{{WRAPPER}} .aux-text'
489	]
490	);
491
492	$this->add_control(
493	'text_normal_color',
494	[
495	'label' => __( 'Color', 'auxin-elements' ),
496	'type' => Controls_Manager::COLOR,
497	'selectors' => [
498	'{{WRAPPER}} .aux-text' => 'color: {{VALUE}};'
499	]
500	]
501
502	);
503
504	$this->add_group_control(
505	Group_Control_Text_Shadow::get_type(),
506	[
507	'name' => 'text_normal_text_shadow',
508	'label' => __( 'Text Shadow', 'auxin-elements' ),
509	'selector' => '{{WRAPPER}} .aux-text'
510	]
511	);
512
513	$this->end_controls_tab();
514
515	$this->start_controls_tab(
516	'text_hover',
517	[
518	'label' => __( 'Hover' , 'auxin-elements' )
519	]
520	);
521
522	$this->add_group_control(
523	Group_Control_Typography::get_type(),
524	[
525	'name' => 'text_hover_typo',
526	'scheme' => Typography::TYPOGRAPHY_1,
527	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
528	]
529	);
530
531	$this->add_control(
532	'text_hover_color',
533	[
534	'label' => __( 'Color', 'auxin-elements' ),
535	'type' => Controls_Manager::COLOR,
536	'selectors' => [
537	'{{WRAPPER}} .aux-modern-button:hover .aux-text' => 'color:{{VALUE}};'
538	]
539	]
540	);
541
542	$this->add_group_control(
543	Group_Control_Text_Shadow::get_type(),
544	[
545	'name' => 'text_hover_text_shadow',
546	'label' => __( 'Text Shadow', 'auxin-elements' ),
547	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
548	]
549	);
550
551	$this->end_controls_tab();
552
553	$this->end_controls_tabs();
554
555	$this->end_controls_section();
556
557
558	/-----------------------------------------------------------------------------------/
559	/* Label Highlighted Style Section
560	/-----------------------------------------------------------------------------------/
561
562	$this->start_controls_section(
563	'section_style_text2',
564	[
565	'label' => __('Highlighted Text', 'auxin-elements' ),
566	'tab' => Controls_Manager::TAB_STYLE,
567	'condition' => [
568	'label2!' => ''
569	]
570	]
571	);
572
573
574	$this->start_controls_tabs( 'text2_styles' );
575
576	$this->start_controls_tab(
577	'text2_normal',
578	[
579	'label' => __( 'Normal' , 'auxin-elements' )
580	]
581	);
582
583	$this->add_group_control(
584	Group_Control_Typography::get_type(),
585	[
586	'name' => 'text2_normal_typo',
587	'scheme' => Typography::TYPOGRAPHY_1,
588	'selector' => '{{WRAPPER}} .aux-text-highlighted'
589	]
590	);
591
592	$this->add_control(
593	'text2_normal_color',
594	[
595	'label' => __( 'Color', 'auxin-elements' ),
596	'type' => Controls_Manager::COLOR,
597	'selectors' => [
598	'{{WRAPPER}} .aux-text-highlighted' => 'color: {{VALUE}};'
599	]
600	]
601
602	);
603
604	$this->add_group_control(
605	Group_Control_Text_Shadow::get_type(),
606	[
607	'name' => 'text2_normal_text_shadow',
608	'label' => __( 'Text Shadow', 'auxin-elements' ),
609	'selector' => '{{WRAPPER}} .aux-text-highlighted'
610	]
611	);
612
613	$this->end_controls_tab();
614
615	$this->start_controls_tab(
616	'text2_hover',
617	[
618	'label' => __( 'Hover' , 'auxin-elements' )
619	]
620	);
621
622	$this->add_group_control(
623	Group_Control_Typography::get_type(),
624	[
625	'name' => 'text2_hover_typo',
626	'scheme' => Typography::TYPOGRAPHY_1,
627	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted'
628	]
629	);
630
631	$this->add_control(
632	'text2_hover_color',
633	[
634	'label' => __( 'Color', 'auxin-elements' ),
635	'type' => Controls_Manager::COLOR,
636	'selectors' => [
637	'{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted' => 'color:{{VALUE}};'
638	]
639	]
640	);
641
642	$this->add_group_control(
643	Group_Control_Text_Shadow::get_type(),
644	[
645	'name' => 'text2_hover_text_shadow',
646	'label' => __( 'Text Shadow', 'auxin-elements' ),
647	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-highlighted'
648	]
649	);
650
651	$this->end_controls_tab();
652
653	$this->end_controls_tabs();
654
655	$this->add_responsive_control(
656	'text2_margin',
657	[
658	'label' => __( 'Margin', 'auxin-elements' ),
659	'type' => Controls_Manager::DIMENSIONS,
660	'size_units' => [ 'px', 'em', '%' ],
661	'selectors' => [
662	'{{WRAPPER}} .aux-text-highlighted' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
663	],
664	'separator' => 'before'
665	]
666	);
667
668	$this->end_controls_section();
669
670	/-----------------------------------------------------------------------------------/
671	/* Label After Style Section
672	/-----------------------------------------------------------------------------------/
673
674	$this->start_controls_section(
675	'section_style_text3',
676	[
677	'label' => __('After Text', 'auxin-elements' ),
678	'tab' => Controls_Manager::TAB_STYLE,
679	'condition' => [
680	'label3!' => ''
681	]
682	]
683	);
684
685
686	$this->start_controls_tabs( 'text3_styles' );
687
688	$this->start_controls_tab(
689	'text3_normal',
690	[
691	'label' => __( 'Normal' , 'auxin-elements' )
692	]
693	);
694
695	$this->add_group_control(
696	Group_Control_Typography::get_type(),
697	[
698	'name' => 'text3_normal_typo',
699	'scheme' => Typography::TYPOGRAPHY_1,
700	'selector' => '{{WRAPPER}} .aux-text-after'
701	]
702	);
703
704	$this->add_control(
705	'text3_normal_color',
706	[
707	'label' => __( 'Color', 'auxin-elements' ),
708	'type' => Controls_Manager::COLOR,
709	'selectors' => [
710	'{{WRAPPER}} .aux-text-after' => 'color: {{VALUE}};'
711	]
712	]
713
714	);
715
716	$this->add_group_control(
717	Group_Control_Text_Shadow::get_type(),
718	[
719	'name' => 'text3_normal_text_shadow',
720	'label' => __( 'Text Shadow', 'auxin-elements' ),
721	'selector' => '{{WRAPPER}} .aux-text-after'
722	]
723	);
724
725	$this->end_controls_tab();
726
727	$this->start_controls_tab(
728	'text3_hover',
729	[
730	'label' => __( 'Hover' , 'auxin-elements' )
731	]
732	);
733
734	$this->add_group_control(
735	Group_Control_Typography::get_type(),
736	[
737	'name' => 'text3_hover_typo',
738	'scheme' => Typography::TYPOGRAPHY_1,
739	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-after'
740	]
741	);
742
743	$this->add_control(
744	'text3_hover_color',
745	[
746	'label' => __( 'Color', 'auxin-elements' ),
747	'type' => Controls_Manager::COLOR,
748	'selectors' => [
749	'{{WRAPPER}} .aux-modern-button:hover .aux-text-after' => 'color:{{VALUE}};'
750	]
751	]
752	);
753
754	$this->add_group_control(
755	Group_Control_Text_Shadow::get_type(),
756	[
757	'name' => 'text3_hover_text_shadow',
758	'label' => __( 'Text Shadow', 'auxin-elements' ),
759	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text-after'
760	]
761	);
762
763	$this->end_controls_tab();
764
765	$this->end_controls_tabs();
766
767	$this->add_responsive_control(
768	'text3_margin',
769	[
770	'label' => __( 'Margin', 'auxin-elements' ),
771	'type' => Controls_Manager::DIMENSIONS,
772	'size_units' => [ 'px', 'em', '%' ],
773	'selectors' => [
774	'{{WRAPPER}} .aux-text-after' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
775	],
776	'separator' => 'before'
777	]
778	);
779
780	$this->end_controls_section();
781
782	/-----------------------------------------------------------------------------------/
783	/* Button Style Section
784	/-----------------------------------------------------------------------------------/
785
786	$this->start_controls_section(
787	'section_style_icon',
788	[
789	'label' => __('Icon', 'auxin-elements' ),
790	'tab' => Controls_Manager::TAB_STYLE,
791	'condition' => [
792	'icon_display' => 'yes'
793	]
794	]
795	);
796
797	$this->add_control(
798	'icon_align',
799	[
800	'label' => __('Alignment', 'auxin-elements'),
801	'type' => Controls_Manager::SELECT,
802	'default' => 'left',
803	'options' => [
804	'top' => __('Over', 'auxin-elements' ),
805	'bottom' => __('Below', 'auxin-elements' ),
806	'left' => __('Left', 'auxin-elements' ),
807	'right' => __('Right', 'auxin-elements' ),
808	]
809	]
810	);
811
812	$this->start_controls_tabs( 'icon_styles' );
813
814	$this->start_controls_tab(
815	'icon_normal',
816	[
817	'label' => __( 'Normal' , 'auxin-elements' )
818	]
819	);
820
821	$this->add_responsive_control(
822	'icon_normal_size',
823	[
824	'label' => __( 'Size', 'auxin-elements' ),
825	'type' => Controls_Manager::SLIDER,
826	'size_units' => [ 'px', '%' ],
827	'range' => [
828	'px' => [
829	'min' => 10,
830	'max' => 512,
831	'step' => 2,
832	],
833	'%' => [
834	'min' => 0,
835	'max' => 100,
836	],
837	],
838	'selectors' => [
839	'{{WRAPPER}} .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
840	]
841	]
842	);
843
844	$this->add_control(
845	'icon_normal_color',
846	[
847	'label' => __( 'Color', 'auxin-elements' ),
848	'type' => Controls_Manager::COLOR,
849	'selectors' => [
850	'{{WRAPPER}} .aux-icon' => 'color: {{VALUE}};',
851	]
852	]
853	);
854
855	$this->add_group_control(
856	Group_Control_Background::get_type(),
857	[
858	'name' => 'icon_normal_bg',
859	'label' => __( 'Background', 'auxin-elements' ),
860	'types' => [ 'classic', 'gradient' ],
861	'selector' => '{{WRAPPER}} .aux-icon:before',
862	]
863	);
864
865	$this->add_group_control(
866	Group_Control_Box_Shadow::get_type(),
867	[
868	'name' => 'icon_normal_box_shadow',
869	'selector' => '{{WRAPPER}} .aux-icon'
870	]
871	);
872
873	$this->add_responsive_control(
874	'icon_normal_margin',
875	[
876	'label' => __( 'Margin', 'auxin-elements' ),
877	'type' => Controls_Manager::DIMENSIONS,
878	'size_units' => [ 'px', '%' ],
879	'selectors' => [
880	'{{WRAPPER}} .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
881	]
882	]
883	);
884
885	$this->add_responsive_control(
886	'icon_normal_padding',
887	[
888	'label' => __( 'Padding', 'auxin-elements' ),
889	'type' => Controls_Manager::DIMENSIONS,
890	'size_units' => [ 'px', '%' ],
891	'selectors' => [
892	'{{WRAPPER}} .aux-icon' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
893	]
894	]
895	);
896
897	$this->add_responsive_control(
898	'icon_normal_border_radius',
899	[
900	'label' => __( 'Border Radius', 'auxin-elements' ),
901	'type' => Controls_Manager::DIMENSIONS,
902	'size_units' => [ 'px', 'em', '%' ],
903	'allowed_dimensions' => 'all',
904	'separator' => 'before',
905	'selectors' => [
906	'{{WRAPPER}} .aux-icon' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
907	],
908	]
909	);
910
911	$this->end_controls_tab();
912
913	$this->start_controls_tab(
914	'icon_hover',
915	[
916	'label' => __( 'Hover' , 'auxin-elements' )
917	]
918	);
919
920	$this->add_responsive_control(
921	'icon_hover_size',
922	[
923	'label' => __( 'Size', 'auxin-elements' ),
924	'type' => Controls_Manager::SLIDER,
925	'size_units' => [ 'px', '%' ],
926	'range' => [
927	'px' => [
928	'min' => 10,
929	'max' => 512,
930	'step' => 2,
931	],
932	'%' => [
933	'min' => 0,
934	'max' => 100,
935	],
936	],
937	'selectors' => [
938	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
939	]
940	]
941	);
942
943	$this->add_control(
944	'icon_hover_color',
945	[
946	'label' => __( 'Color', 'auxin-elements' ),
947	'type' => Controls_Manager::COLOR,
948	'selectors' => [
949	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'color: {{VALUE}};',
950	]
951	]
952	);
953
954	$this->add_group_control(
955	Group_Control_Background::get_type(),
956	[
957	'name' => 'icon_hover_bg',
958	'label' => __( 'Background', 'auxin-elements' ),
959	'types' => [ 'classic', 'gradient' ],
960	'selector' => '{{WRAPPER}} .aux-icon:after',
961	]
962	);
963
964	$this->add_group_control(
965	Group_Control_Box_Shadow::get_type(),
966	[
967	'name' => 'icon_hover_box_shadow',
968	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-icon'
969	]
970	);
971
972	$this->add_responsive_control(
973	'icon_hover_margin',
974	[
975	'label' => __( 'Margin', 'auxin-elements' ),
976	'type' => Controls_Manager::DIMENSIONS,
977	'size_units' => [ 'px', '%' ],
978	'selectors' => [
979	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
980	]
981	]
982	);
983
984	$this->add_responsive_control(
985	'icon_hover_padding',
986	[
987	'label' => __( 'Padding', 'auxin-elements' ),
988	'type' => Controls_Manager::DIMENSIONS,
989	'size_units' => [ 'px', '%' ],
990	'selectors' => [
991	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
992	]
993	]
994	);
995
996	$this->add_responsive_control(
997	'icon_hover_border_radius',
998	[
999	'label' => __( 'Border Radius', 'auxin-elements' ),
1000	'type' => Controls_Manager::DIMENSIONS,
1001	'size_units' => [ 'px', 'em', '%' ],
1002	'allowed_dimensions' => 'all',
1003	'separator' => 'before',
1004	'selectors' => [
1005	'{{WRAPPER}} .aux-icon:hover' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1006	],
1007	]
1008	);
1009
1010	$this->end_controls_tab();
1011
1012	$this->end_controls_tabs();
1013
1014	$this->end_controls_section();
1015	}
1016
1017	/**
1018	* Render image box widget output on the frontend.
1019	*
1020	* Written in PHP and used to generate the final HTML.
1021	*
1022	* @since 1.0.0
1023	* @access protected
1024	*/
1025	protected function render() {
1026
1027	$url = '';
1028	$settings = $this->get_settings_for_display();
1029
1030	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-wrapper' );
1031	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-align-' . $settings['btn_align'] );
1032
1033	$this->add_render_attribute( 'button', 'class', 'aux-modern-button' );
1034	$this->add_render_attribute( 'button', 'class', 'aux-' . $settings['btn_skin'] );
1035	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_size'] );
1036	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_shape'] );
1037	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_type'] );
1038	$this->add_render_attribute( 'button', 'class', 'aux-icon-' . $settings['icon_align'] );
1039
1040
1041	if ( ! empty( $settings['link']['url'] ) ) {
1042	$this->add_link_attributes( 'button', $settings['link'] );
1043	$url = $settings['link']['url'];
1044	}
1045
1046	?>
1047	<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?> >
1048	<?php
1049	if ( auxin_is_true( $settings['open_video_in_lightbox'] ) && strlen( $url ) > 3 ) { // disable lighbox if anchor is set
1050
1051	$this->add_render_attribute( 'button', 'class', 'aux-open-video' );
1052	$this->add_render_attribute( 'button', 'data-type', 'video' );
1053
1054	echo '<span class="aux-lightbox-video ">';
1055	}
1056	?>
1057	<a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
1058	<div class="aux-overlay"></div>
1059	<?php if ( $settings['icon_display'] ) { ;?>
1060	<div class="aux-icon ">
1061	<?php Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] );?>
1062	</div>
1063	<?php };?>
1064	<div class="aux-text">
1065	<?php
1066	if( ! empty( $settings['label'] ) ){ printf( '<span class="aux-text-before">%s</span>', do_shortcode( $settings['label'] ) ); }
1067	if( ! empty( $settings['label2'] ) ){ printf( '<span class="aux-text-highlighted">%s</span>', do_shortcode( $settings['label2'] ) ); }
1068	if( ! empty( $settings['label3'] ) ){ printf( '<span class="aux-text-after">%s</span>', do_shortcode( $settings['label3'] ) ); }
1069	?>
1070	</div>
1071	</a>
1072	<?php
1073	if ( auxin_is_true( $settings['open_video_in_lightbox'] ) ) {
1074	echo '</span>';
1075	}
1076	?>
1077
1078	</div>
1079
1080	<?php
1081	}
1082
1083	}