PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.0.7
Easy Elements for Elementor – Addons & Website Templates v1.0.7
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
← All changes | widgets/button/css/button.css +242 -242 1.3.31.0.7 View file →
@@ -1,242 +1,242 @@
1 -:root {
2 - --e-global-color-primary: #FFD012;
3 - --e-global-color-secondary: #0B3665;
4 - --eel-gradient-1: #4750CC;
5 - --eel-gradient-2: #EF5CE8;
6 - --eel-gradient-3: #EFC7AE;
7 -}
8 -
9 -.eel-button-gradient {
10 - position: relative;
11 - overflow: hidden;
12 -}
13 -.eel-button-gradient::after, .eel-button-gradient::before {
14 - content: "";
15 - position: absolute;
16 - top: 0;
17 - left: 0;
18 - width: 100%;
19 - height: 100%;
20 - transition: opacity 0.6s ease-in-out;
21 - z-index: 0;
22 -}
23 -.eel-button-gradient::after {
24 - background: linear-gradient(68.75deg, var(--eel-gradient-1) 9.78%, var(--eel-gradient-2) 58.79%, var(--eel-gradient-3) 92.67%);
25 - opacity: 1;
26 -}
27 -.eel-button-gradient::before {
28 - background: linear-gradient(-68.75deg, var(--eel-gradient-1) 9.78%, var(--eel-gradient-2) 58.79%, var(--eel-gradient-3) 92.67%);
29 - opacity: 0;
30 -}
31 -.eel-button-gradient:hover::after {
32 - opacity: 0;
33 -}
34 -.eel-button-gradient:hover::before {
35 - opacity: 1;
36 -}
37 -.eel-button-gradient span {
38 - position: relative;
39 - z-index: 1;
40 -}
41 -
42 -.elementor-widget-eel-button .eel-button {
43 - display: inline-flex;
44 - align-items: center;
45 - justify-content: center;
46 - text-decoration: none;
47 - border: none;
48 - cursor: pointer;
49 - font-family: inherit;
50 - text-align: center;
51 - vertical-align: middle;
52 - -webkit-user-select: none;
53 - -moz-user-select: none;
54 - user-select: none;
55 - transition: all 0.5s ease;
56 - position: relative;
57 - overflow: hidden;
58 - white-space: nowrap;
59 - line-height: 1.5;
60 - padding: 10px 20px;
61 - border-radius: 5px;
62 -}
63 -.elementor-widget-eel-button .eel-button:hover {
64 - text-decoration: none;
65 - transform: translateY(-1px);
66 -}
67 -
68 -.eel-button-primary {
69 - background-color: var(--e-global-color-primary);
70 - color: #ffffff;
71 -}
72 -.eel-button-primary:hover {
73 - background-color: var(--e-global-color-secondary);
74 - border-color: var(--e-global-color-secondary);
75 -}
76 -
77 -.eel-button-outline {
78 - background-color: transparent;
79 - color: var(--e-global-color-secondary);
80 - border: 2px solid var(--e-global-color-secondary);
81 -}
82 -.eel-button-outline:hover {
83 - background-color: var(--e-global-color-primary);
84 -}
85 -
86 -.eel-button-icon-before,
87 -.eel-button-icon-after {
88 - display: inline-flex;
89 - align-items: center;
90 - justify-content: center;
91 - transition: all 0.3s ease;
92 -}
93 -
94 -.eel-button-icon-before {
95 - margin-right: 8px;
96 -}
97 -
98 -.eel-button-icon-after {
99 - margin-left: 8px;
100 -}
101 -
102 -.eel-button .elementor-icon {
103 - display: inline-flex;
104 - align-items: center;
105 - justify-content: center;
106 - transition: all 0.3s ease;
107 -}
108 -.eel-button .elementor-icon i {
109 - font-size: inherit;
110 - color: inherit;
111 -}
112 -.eel-button .elementor-icon svg {
113 - width: 1em;
114 - height: 1em;
115 -}
116 -
117 -.eel-button .elementor-icon,
118 -.eel-button .elementor-icon i,
119 -.eel-button .elementor-icon svg {
120 - color: inherit;
121 -}
122 -
123 -.eel-button i,
124 -.eel-button svg,
125 -.eel-button .elementor-icon,
126 -.eel-button .elementor-icon i,
127 -.eel-button .elementor-icon svg,
128 -.eel-button .eicon,
129 -.eel-button .fas,
130 -.eel-button .far,
131 -.eel-button .fab,
132 -.eel-button .fa {
133 - color: inherit;
134 - font-size: inherit;
135 -}
136 -.eel-button svg,
137 -.eel-button .elementor-icon svg {
138 - width: 1em;
139 - height: 1em;
140 -}
141 -
142 -.elementor-widget-eel-button .eel-button img,
143 -.elementor-widget-eel-button .eel-button .eel-button-icon-before img,
144 -.elementor-widget-eel-button .eel-button .eel-button-icon-after img {
145 - width: 1em;
146 - height: 1em;
147 - -o-object-fit: contain;
148 - object-fit: contain;
149 - vertical-align: middle;
150 -}
151 -.elementor-widget-eel-button .eel-button .eel-button-icon-before svg,
152 -.elementor-widget-eel-button .eel-button .eel-button-icon-after svg {
153 - width: 1em;
154 - height: 1em;
155 - color: inherit;
156 - vertical-align: middle;
157 -}
158 -.elementor-widget-eel-button .eel-button .eel-button-icon-before svg path,
159 -.elementor-widget-eel-button .eel-button .eel-button-icon-after svg path {
160 - fill: currentColor;
161 -}
162 -
163 -.eel-button-text {
164 - display: inline-block;
165 - vertical-align: middle;
166 -}
167 -
168 -@keyframes eel-button-spin {
169 - 0% {
170 - transform: rotate(0deg);
171 - }
172 - 100% {
173 - transform: rotate(360deg);
174 - }
175 -}
176 -.eel-button-icon_btn {
177 - background: transparent;
178 -}
179 -.eel-button-icon_btn .eel-button-icon-after,
180 -.eel-button-icon_btn .eel-button-icon-before {
181 - display: inline-grid;
182 - place-content: center;
183 - place-items: center;
184 - width: 64px;
185 - height: 64px;
186 - border-radius: 50%;
187 - background-color: var(--e-global-color-primary);
188 - color: #ffffff;
189 - margin-right: 16px;
190 -}
191 -
192 -.hover-gradient .eel-button-primary {
193 - position: relative;
194 - border: 2px solid transparent;
195 - overflow: hidden;
196 -}
197 -.hover-gradient .eel-button-primary::before {
198 - content: "";
199 - position: absolute;
200 - top: 0;
201 - left: 0;
202 - width: 100%;
203 - height: 100%;
204 - transition: opacity 0.6s ease-in-out;
205 - z-index: 0;
206 - background: linear-gradient(68.75deg, var(--eel-gradient-1) 9.78%, var(--eel-gradient-2) 58.79%, var(--eel-gradient-3) 92.67%);
207 - opacity: 0;
208 -}
209 -.hover-gradient .eel-button-primary:hover {
210 - background-color: unset !important;
211 -}
212 -.hover-gradient .eel-button-primary:hover::before {
213 - opacity: 1;
214 -}
215 -.hover-gradient .eel-button-primary span {
216 - position: relative;
217 - z-index: 1;
218 -}
219 -
220 -.eel-button.eel-button-border-gradient {
221 - z-index: 1;
222 - transition: all 0.4s ease;
223 - position: relative;
224 - background: #fff;
225 - color: currentColor;
226 -}
227 -.eel-button.eel-button-border-gradient::before {
228 - content: "";
229 - position: absolute;
230 - inset: 0;
231 - padding: 2px; /* border width */
232 - background: linear-gradient(90deg, #A53E1B 0%, #173998 100%);
233 - -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
234 - -webkit-mask-composite: xor;
235 - mask-composite: exclude;
236 - z-index: -1;
237 - transition: background 0.5s ease;
238 -}
239 -.eel-button.eel-button-border-gradient:hover {
240 - color: #fff;
241 - background: linear-gradient(90deg, #A53E1B, #173998);
242 -}
1 +:root {
2 + --e-global-color-primary: #FFD012;
3 + --e-global-color-secondary: #0B3665;
4 + --eel-gradient-1: #4750CC;
5 + --eel-gradient-2: #EF5CE8;
6 + --eel-gradient-3: #EFC7AE;
7 +}
8 +
9 +.eel-button-gradient {
10 + position: relative;
11 + overflow: hidden;
12 +}
13 +.eel-button-gradient::after, .eel-button-gradient::before {
14 + content: "";
15 + position: absolute;
16 + top: 0;
17 + left: 0;
18 + width: 100%;
19 + height: 100%;
20 + transition: opacity 0.6s ease-in-out;
21 + z-index: 0;
22 +}
23 +.eel-button-gradient::after {
24 + background: linear-gradient(68.75deg, var(--eel-gradient-1) 9.78%, var(--eel-gradient-2) 58.79%, var(--eel-gradient-3) 92.67%);
25 + opacity: 1;
26 +}
27 +.eel-button-gradient::before {
28 + background: linear-gradient(-68.75deg, var(--eel-gradient-1) 9.78%, var(--eel-gradient-2) 58.79%, var(--eel-gradient-3) 92.67%);
29 + opacity: 0;
30 +}
31 +.eel-button-gradient:hover::after {
32 + opacity: 0;
33 +}
34 +.eel-button-gradient:hover::before {
35 + opacity: 1;
36 +}
37 +.eel-button-gradient span {
38 + position: relative;
39 + z-index: 1;
40 +}
41 +
42 +.elementor-widget-eel-button .eel-button {
43 + display: inline-flex;
44 + align-items: center;
45 + justify-content: center;
46 + text-decoration: none;
47 + border: none;
48 + cursor: pointer;
49 + font-family: inherit;
50 + text-align: center;
51 + vertical-align: middle;
52 + -webkit-user-select: none;
53 + -moz-user-select: none;
54 + user-select: none;
55 + transition: all 0.5s ease;
56 + position: relative;
57 + overflow: hidden;
58 + white-space: nowrap;
59 + line-height: 1.5;
60 + padding: 10px 20px;
61 + border-radius: 5px;
62 +}
63 +.elementor-widget-eel-button .eel-button:hover {
64 + text-decoration: none;
65 + transform: translateY(-1px);
66 +}
67 +
68 +.eel-button-primary {
69 + background-color: var(--e-global-color-primary);
70 + color: #ffffff;
71 +}
72 +.eel-button-primary:hover {
73 + background-color: var(--e-global-color-secondary);
74 + border-color: var(--e-global-color-secondary);
75 +}
76 +
77 +.eel-button-outline {
78 + background-color: transparent;
79 + color: var(--e-global-color-secondary);
80 + border: 2px solid var(--e-global-color-secondary);
81 +}
82 +.eel-button-outline:hover {
83 + background-color: var(--e-global-color-primary);
84 +}
85 +
86 +.eel-button-icon-before,
87 +.eel-button-icon-after {
88 + display: inline-flex;
89 + align-items: center;
90 + justify-content: center;
91 + transition: all 0.3s ease;
92 +}
93 +
94 +.eel-button-icon-before {
95 + margin-right: 8px;
96 +}
97 +
98 +.eel-button-icon-after {
99 + margin-left: 8px;
100 +}
101 +
102 +.eel-button .elementor-icon {
103 + display: inline-flex;
104 + align-items: center;
105 + justify-content: center;
106 + transition: all 0.3s ease;
107 +}
108 +.eel-button .elementor-icon i {
109 + font-size: inherit;
110 + color: inherit;
111 +}
112 +.eel-button .elementor-icon svg {
113 + width: 1em;
114 + height: 1em;
115 +}
116 +
117 +.eel-button .elementor-icon,
118 +.eel-button .elementor-icon i,
119 +.eel-button .elementor-icon svg {
120 + color: inherit;
121 +}
122 +
123 +.eel-button i,
124 +.eel-button svg,
125 +.eel-button .elementor-icon,
126 +.eel-button .elementor-icon i,
127 +.eel-button .elementor-icon svg,
128 +.eel-button .eicon,
129 +.eel-button .fas,
130 +.eel-button .far,
131 +.eel-button .fab,
132 +.eel-button .fa {
133 + color: inherit;
134 + font-size: inherit;
135 +}
136 +.eel-button svg,
137 +.eel-button .elementor-icon svg {
138 + width: 1em;
139 + height: 1em;
140 +}
141 +
142 +.elementor-widget-eel-button .eel-button img,
143 +.elementor-widget-eel-button .eel-button .eel-button-icon-before img,
144 +.elementor-widget-eel-button .eel-button .eel-button-icon-after img {
145 + width: 1em;
146 + height: 1em;
147 + -o-object-fit: contain;
148 + object-fit: contain;
149 + vertical-align: middle;
150 +}
151 +.elementor-widget-eel-button .eel-button .eel-button-icon-before svg,
152 +.elementor-widget-eel-button .eel-button .eel-button-icon-after svg {
153 + width: 1em;
154 + height: 1em;
155 + color: inherit;
156 + vertical-align: middle;
157 +}
158 +.elementor-widget-eel-button .eel-button .eel-button-icon-before svg path,
159 +.elementor-widget-eel-button .eel-button .eel-button-icon-after svg path {
160 + fill: currentColor;
161 +}
162 +
163 +.eel-button-text {
164 + display: inline-block;
165 + vertical-align: middle;
166 +}
167 +
168 +@keyframes eel-button-spin {
169 + 0% {
170 + transform: rotate(0deg);
171 + }
172 + 100% {
173 + transform: rotate(360deg);
174 + }
175 +}
176 +.eel-button-icon_btn {
177 + background: transparent;
178 +}
179 +.eel-button-icon_btn .eel-button-icon-after,
180 +.eel-button-icon_btn .eel-button-icon-before {
181 + display: inline-grid;
182 + place-content: center;
183 + place-items: center;
184 + width: 64px;
185 + height: 64px;
186 + border-radius: 50%;
187 + background-color: var(--e-global-color-primary);
188 + color: #ffffff;
189 + margin-right: 16px;
190 +}
191 +
192 +.hover-gradient .eel-button-primary {
193 + position: relative;
194 + border: 2px solid transparent;
195 + overflow: hidden;
196 +}
197 +.hover-gradient .eel-button-primary::before {
198 + content: "";
199 + position: absolute;
200 + top: 0;
201 + left: 0;
202 + width: 100%;
203 + height: 100%;
204 + transition: opacity 0.6s ease-in-out;
205 + z-index: 0;
206 + background: linear-gradient(68.75deg, var(--eel-gradient-1) 9.78%, var(--eel-gradient-2) 58.79%, var(--eel-gradient-3) 92.67%);
207 + opacity: 0;
208 +}
209 +.hover-gradient .eel-button-primary:hover {
210 + background-color: unset !important;
211 +}
212 +.hover-gradient .eel-button-primary:hover::before {
213 + opacity: 1;
214 +}
215 +.hover-gradient .eel-button-primary span {
216 + position: relative;
217 + z-index: 1;
218 +}
219 +
220 +.eel-button.eel-button-border-gradient {
221 + z-index: 1;
222 + transition: all 0.4s ease;
223 + position: relative;
224 + background: #fff;
225 + color: currentColor;
226 +}
227 +.eel-button.eel-button-border-gradient::before {
228 + content: "";
229 + position: absolute;
230 + inset: 0;
231 + padding: 2px; /* border width */
232 + background: linear-gradient(90deg, #A53E1B 0%, #173998 100%);
233 + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
234 + -webkit-mask-composite: xor;
235 + mask-composite: exclude;
236 + z-index: -1;
237 + transition: background 0.5s ease;
238 +}
239 +.eel-button.eel-button-border-gradient:hover {
240 + color: #fff;
241 + background: linear-gradient(90deg, #A53E1B, #173998);
242 +}/*# sourceMappingURL=button.css.map */