Skip to content

Commit 0b104f6

Browse files
bedimcodebedimcode
authored
Add files via upload
1 parent 267a7d4 commit 0b104f6

File tree

11 files changed

+472
-0
lines changed

11 files changed

+472
-0
lines changed

‎assets/css/styles.css

+227
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
/*=============== GOOGLE FONTS ===============*/
2+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap");
3+
4+
/*=============== VARIABLES CSS ===============*/
5+
:root {
6+
/*========== Colors ==========*/
7+
/*Color mode HSL(hue, saturation, lightness)*/
8+
--gradient-color: linear-gradient(90deg,
9+
hsl(48, 100%, 50%) 0%,
10+
hsl(28, 100%, 54%, 100%));
11+
--black-color: hsl(225, 15%, 6%);
12+
--reflection-color: hsla(48, 30%, 95%, .3);
13+
--body-color: hsl(48, 100%, 98%);
14+
15+
/*========== Font and typography ==========*/
16+
/*.5rem = 8px | 1rem = 16px ...*/
17+
--body-font: "Montserrat", sans-serif;
18+
--normal-font-size: 1rem;
19+
}
20+
21+
/*=============== BASE ===============*/
22+
* {
23+
box-sizing: border-box;
24+
padding: 0;
25+
margin: 0;
26+
}
27+
28+
body {
29+
font-family: var(--body-font);
30+
font-size: var(--normal-font-size);
31+
background-color: var(--body-color);
32+
}
33+
34+
a {
35+
text-decoration: none;
36+
}
37+
38+
/*=============== BUTTON ===============*/
39+
.container {
40+
height: 100vh;
41+
margin-inline: 1.5rem;
42+
display: grid;
43+
place-items: center;
44+
}
45+
46+
.button {
47+
position: relative;
48+
transition: transform .4s;
49+
}
50+
51+
.button__content {
52+
position: relative;
53+
background: var(--gradient-color);
54+
padding: 1.25rem 3rem;
55+
border-radius: 4rem;
56+
border: 3px solid var(--black-color);
57+
color: var(--black-color);
58+
display: flex;
59+
align-items: center;
60+
column-gap: .5rem;
61+
overflow: hidden;
62+
}
63+
64+
.button__text {
65+
font-weight: 700;
66+
}
67+
68+
.button__icon {
69+
font-size: 1.5rem;
70+
}
71+
72+
.button__text,
73+
.button__icon {
74+
position: relative;
75+
z-index: 2;
76+
}
77+
78+
/* Reflection shapes */
79+
.button__reflection-1,
80+
.button__reflection-2 {
81+
width: 8px;
82+
height: 120px;
83+
background-color: var(--reflection-color);
84+
rotate: 30deg;
85+
position: absolute;
86+
inset: 0;
87+
top: 0;
88+
left: -180%;
89+
margin: auto;
90+
transition: left .6s cubic-bezier(.2, .5, .2, 1.2);
91+
}
92+
93+
.button__reflection-1::after {
94+
content: "";
95+
width: 26px;
96+
height: 100%;
97+
background-color: var(--reflection-color);
98+
position: absolute;
99+
top: -1rem;
100+
left: 1.25rem;
101+
}
102+
103+
.button__reflection-2::after {
104+
content: "";
105+
width: 40px;
106+
height: 100%;
107+
background-color: var(--reflection-color);
108+
position: absolute;
109+
top: -1rem;
110+
left: .8rem;
111+
}
112+
113+
/* Moving geometric shapes */
114+
.button img {
115+
position: absolute;
116+
opacity: 0;
117+
transition: transform .5s, opacity .5s;
118+
}
119+
120+
.button__star-1 {
121+
width: 20px;
122+
top: -14px;
123+
left: -16px;
124+
transform: rotate(48deg) scale(.1);
125+
}
126+
127+
.button__star-2 {
128+
width: 40px;
129+
right: -10px;
130+
top: -4px;
131+
transform: rotate(-48deg) scale(.1);
132+
}
133+
134+
.button__circle-1,
135+
.button__circle-2 {
136+
width: 8px;
137+
}
138+
139+
.button__circle-1 {
140+
top: -8px;
141+
left: 58px;
142+
transform: scale(.1);
143+
}
144+
145+
.button__circle-2 {
146+
right: 34px;
147+
bottom: -8px;
148+
transform: scale(.1);
149+
}
150+
151+
.button__diamond {
152+
width: 18px;
153+
top: -18px;
154+
right: 62px;
155+
transform: scale(.1);
156+
}
157+
158+
.button__triangle {
159+
width: 30px;
160+
left: 15px;
161+
bottom: -16px;
162+
transform: rotate(-48deg) scale(.1);
163+
}
164+
165+
/* Gradient shadow */
166+
.button__shadow {
167+
width: 100%;
168+
height: 100%;
169+
position: absolute;
170+
left: 0;
171+
top: 0;
172+
background: var(--gradient-color);
173+
padding: 1.25rem 3rem;
174+
border-radius: 4rem;
175+
border: 3px solid var(--black-color);
176+
z-index: -1;
177+
transition: transform .3s;
178+
}
179+
180+
/* View shadow gradient */
181+
.button:hover .button__shadow {
182+
transform: translate(-.5rem, .5rem);
183+
}
184+
185+
/* Move reflection */
186+
.button:hover .button__reflection-1 {
187+
left: 120%;
188+
}
189+
190+
.button:hover .button__reflection-2 {
191+
left: -70%;
192+
}
193+
194+
/* View geometric shapes */
195+
.button:hover {
196+
transform: rotate(-4deg) scale(1.1);
197+
}
198+
199+
.button:hover img {
200+
opacity: 1;
201+
}
202+
203+
.button:hover .button__star-1 {
204+
transform: scale(1.1);
205+
transition-delay: .1s;
206+
}
207+
208+
.button:hover .button__star-2 {
209+
transform: scale(1.1);
210+
}
211+
212+
.button:hover .button__circle-1 {
213+
transform: translateY(-8px) scale(1.1);
214+
transition-delay: .1s;
215+
}
216+
217+
.button:hover .button__circle-2 {
218+
transform: translate(-20px, 20px) scale(1.1);
219+
}
220+
221+
.button:hover .button__diamond {
222+
transform: translateY(7px) rotate(-24deg) scale(1.1);
223+
}
224+
225+
.button:hover .button__triangle {
226+
transform: rotate(-12deg) scale(1.1);
227+
}

‎assets/img/circle.png

2.42 KB
Loading

‎assets/img/diamond.png

1.46 KB
Loading

‎assets/img/star.png

2.25 KB
Loading

‎assets/img/triangle.png

1.26 KB
Loading

‎assets/scss/base/_base.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*=============== BASE ===============*/
2+
*{
3+
box-sizing: border-box;
4+
padding: 0;
5+
margin: 0;
6+
}
7+
8+
body{
9+
font-family: var(--body-font);
10+
font-size: var(--normal-font-size);
11+
background-color: var(--body-color);
12+
}
13+
14+
a{
15+
text-decoration: none;
16+
}

0 commit comments

Comments
 (0)