Skip to content

Commit 499c201

Browse files
wealcoderahsanwealcoderahsan
committed
button pro,category showcase , category slider
1 parent 83ecc42 commit 499c201

22 files changed

+6903
-5
lines changed

‎assets/css/widgets/button-pro.css‎

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
.aae--btn-pro-wrapper svg {
2+
width: 1em;
3+
height: 1em;
4+
}
5+
.aae--btn-pro-wrapper .icon {
6+
line-height: 0;
7+
}
8+
9+
.aae--btn-pro {
10+
gap: 5px;
11+
display: inline-flex;
12+
align-items: center;
13+
transition: all 0.3s;
14+
outline: none;
15+
}
16+
17+
/* Style One */
18+
.style-1 .btn-border-divide {
19+
align-items: flex-end;
20+
overflow: hidden;
21+
}
22+
.style-1 .btn-border-divide:hover .icon i:first-child,
23+
.style-1 .btn-border-divide:hover .icon svg:first-child {
24+
transform: translate(0, 0);
25+
opacity: 1;
26+
}
27+
.style-1 .btn-border-divide:hover .icon i:last-child,
28+
.style-1 .btn-border-divide:hover .icon svg:last-child {
29+
transform: translate(10px, -10px);
30+
opacity: 0;
31+
}
32+
.style-1 .btn-border-divide .text,
33+
.style-1 .btn-border-divide .icon {
34+
transition: all 0.3s;
35+
border-bottom: 1px solid #101A33;
36+
}
37+
.style-1 .btn-border-divide .icon {
38+
display: inline-flex;
39+
padding-bottom: 3px;
40+
position: relative;
41+
overflow: hidden;
42+
}
43+
.style-1 .btn-border-divide .icon i:first-child,
44+
.style-1 .btn-border-divide .icon svg:first-child {
45+
position: absolute;
46+
transform: translate(-10px, 10px);
47+
transition: all 0.3s;
48+
opacity: 0;
49+
}
50+
.style-1 .btn-border-divide .icon i:last-child,
51+
.style-1 .btn-border-divide .icon svg:last-child {
52+
transition: all 0.3s;
53+
opacity: 1;
54+
}
55+
56+
/* Style Two */
57+
.style-2 .aae--btn-pro {
58+
border: 3px solid #1C1D20;
59+
padding: 12px 30px;
60+
border-radius: 10px;
61+
}
62+
.style-2 .aae--btn-pro:hover {
63+
box-shadow: 7px 7px 0 #1C1D20;
64+
}
65+
66+
/* Style Three */
67+
.style-3 .btn-text-flip {
68+
perspective: 1000px;
69+
align-items: center;
70+
}
71+
.style-3 .btn-text-flip:hover span {
72+
transform: rotateX(90deg) translateY(-12px);
73+
}
74+
.style-3 .btn-text-flip span {
75+
position: relative;
76+
display: inline-block;
77+
padding: 0;
78+
color: #121212;
79+
transition: transform 0.3s;
80+
transform-origin: 50% 0;
81+
transform-style: preserve-3d;
82+
}
83+
.style-3 .btn-text-flip span:before {
84+
position: absolute;
85+
top: 100%;
86+
left: 0;
87+
width: 100%;
88+
height: 100%;
89+
content: attr(data-text);
90+
transition: color 0.3s;
91+
transform: rotateX(-90deg);
92+
transform-origin: 50% 0;
93+
text-align: center;
94+
}
95+
96+
/* Style 4 */
97+
.style-4 .aae--btn-pro {
98+
font-weight: 500;
99+
font-size: 16px;
100+
text-align: center;
101+
color: #fff;
102+
background-color: #121212;
103+
padding: 18px 42px;
104+
border-radius: 5px;
105+
position: relative;
106+
overflow: hidden;
107+
z-index: 1;
108+
}
109+
.style-4 .aae--btn-pro:hover span {
110+
width: 500px;
111+
height: 500px;
112+
}
113+
.style-4 .aae--btn-pro:hover strong::after {
114+
right: 0;
115+
opacity: 1;
116+
}
117+
.style-4 .aae--btn-pro span {
118+
position: absolute;
119+
width: 0;
120+
height: 0;
121+
background: #FC5A11;
122+
border-radius: 50%;
123+
transform: translate(-50%, -50%);
124+
transition: all 0.5s ease;
125+
z-index: -1;
126+
}
127+
.style-4 .aae--btn-pro strong {
128+
width: 50px;
129+
display: inherit;
130+
height: 1px;
131+
background: #fff;
132+
margin-left: 5px;
133+
position: relative;
134+
}
135+
.style-4 .aae--btn-pro strong::after {
136+
position: absolute;
137+
content: "";
138+
top: -5px;
139+
right: 30px;
140+
border: solid #fff;
141+
border-width: 0 1px 1px 0;
142+
padding: 5px;
143+
transform: rotate(-45deg);
144+
transition: all 0.3s;
145+
opacity: 0;
146+
}
147+
148+
/* Style Five and Six */
149+
.aae-btn-pro-group {
150+
display: flex;
151+
width: -moz-fit-content;
152+
width: fit-content;
153+
}
154+
.aae-btn-pro-group .g-btn-text {
155+
padding: 21px 40px;
156+
font-weight: 600;
157+
font-size: 16px;
158+
line-height: 1;
159+
color: #fff;
160+
background-color: #0A1A3D;
161+
text-transform: capitalize;
162+
transition: all 0.3s;
163+
display: inline-flex;
164+
align-items: center;
165+
overflow: hidden;
166+
z-index: 1;
167+
gap: 30px;
168+
white-space: nowrap;
169+
border-radius: 30px;
170+
text-decoration: none;
171+
}
172+
.aae-btn-pro-group .g-btn-icon {
173+
color: #fff;
174+
fill: #fff;
175+
border-radius: 50px;
176+
background-color: #0A1A3D;
177+
border: 1px solid transparent;
178+
height: 60px;
179+
width: 60px;
180+
display: flex;
181+
align-items: center;
182+
justify-content: center;
183+
transition: all 0.5s;
184+
}
185+
186+
.aae-btn-pro-group > *:nth-child(2) {
187+
transform: scale3d(1, 1, 1);
188+
}
189+
190+
.aae-btn-pro-group:hover > *:nth-child(2) {
191+
transform: scale3d(1, 1, 1);
192+
}
193+
194+
/* Style Five */
195+
.style-5 .aae-btn-pro-group > *:nth-child(1) {
196+
transform: scale3d(0.5, 0.5, 1);
197+
margin-right: calc(var(--icon-width, 60px) * -1);
198+
opacity: 0;
199+
}
200+
.style-5 .aae-btn-pro-group > *:nth-child(3) {
201+
transform: scale3d(1, 1, 1);
202+
margin-left: 0;
203+
opacity: 1;
204+
}
205+
.style-5 .aae-btn-pro-group:hover > *:nth-child(1) {
206+
transform: scale3d(1, 1, 1);
207+
margin-right: 0;
208+
opacity: 1;
209+
}
210+
.style-5 .aae-btn-pro-group:hover > *:nth-child(3) {
211+
transform: scale3d(0.5, 0.5, 1);
212+
margin-left: calc(var(--icon-width, 60px) * -1);
213+
opacity: 0;
214+
}
215+
216+
/* Style Six */
217+
.style-6 .aae-btn-pro-group > *:nth-child(1) {
218+
transform: scale3d(1, 1, 1);
219+
margin-right: 0;
220+
opacity: 1;
221+
}
222+
.style-6 .aae-btn-pro-group > *:nth-child(3) {
223+
transform: scale3d(0.5, 0.5, 1);
224+
margin-left: calc(var(--icon-width, 60px) * -1);
225+
opacity: 0;
226+
}
227+
.style-6 .aae-btn-pro-group:hover > *:nth-child(1) {
228+
transform: scale3d(0.5, 0.5, 1);
229+
margin-right: calc(var(--icon-width, 60px) * -1);
230+
opacity: 0;
231+
}
232+
.style-6 .aae-btn-pro-group:hover > *:nth-child(3) {
233+
transform: scale3d(1, 1, 1);
234+
margin-left: 0;
235+
opacity: 1;
236+
}
237+
238+
/* Style Seven */
239+
.style-7 .aae--btn-pro {
240+
color: #fff;
241+
fill: #fff;
242+
border: 1px solid #ddd;
243+
padding: 18px 30px;
244+
border-radius: 35px;
245+
position: relative;
246+
overflow: hidden;
247+
--outline-gap: 10px;
248+
}
249+
.style-7 .aae--btn-pro:hover {
250+
fill: #121212;
251+
color: #121212;
252+
}
253+
.style-7 .aae--btn-pro:hover::after {
254+
width: 50%;
255+
top: 4px;
256+
transform: translate(-50%, -100%);
257+
}
258+
.style-7 .aae--btn-pro::after {
259+
position: absolute;
260+
content: "";
261+
width: calc(100% - var(--outline-gap) * 2);
262+
height: calc(100% - var(--outline-gap) * 2);
263+
left: 50%;
264+
top: 50%;
265+
background: #121212;
266+
transform: translate(-50%, -50%);
267+
border-radius: 35px;
268+
z-index: -1;
269+
transition: all 0.3s;
270+
}
271+
272+
@keyframes btnSlideBounce {
273+
0% {
274+
left: -92%;
275+
}
276+
75% {
277+
left: 3%;
278+
}
279+
100% {
280+
left: 0;
281+
}
282+
}
283+
/* Style Eight */
284+
.style-8 .aae--btn-pro {
285+
color: #121212;
286+
fill: #121212;
287+
border: 1px solid #121212;
288+
padding: 18px 30px;
289+
border-radius: 35px;
290+
position: relative;
291+
overflow: hidden;
292+
background-color: #121212;
293+
z-index: 1;
294+
cursor: pointer;
295+
}
296+
.style-8 .aae--btn-pro::after {
297+
position: absolute;
298+
content: "";
299+
width: 100%;
300+
height: 100%;
301+
left: 0;
302+
top: 0;
303+
background: #fff;
304+
border-radius: 35px;
305+
z-index: -1;
306+
transition: left 0.6s cubic-bezier(0.65, 0, 0.26, 1.2);
307+
}
308+
.style-8 .aae--btn-pro:hover {
309+
color: #fff;
310+
fill: #fff;
311+
}
312+
.style-8 .aae--btn-pro:hover::after {
313+
left: -92%;
314+
}

‎assets/css/widgets/button-pro.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)