zomo/penguin.ikea.fishing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rearranged css

Browse Source
This commit is contained in:
zomo
2025-11-27 19:26:23 -06:00
parent a0b2f09c77
commit 984c099dc6
4 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ButtonNew.tsx
View File

@@ -9,7 +9,7 @@ function ButtonNew() {
<div>Join with the</div> <div>Join with the</div>
<div>New Client</div> <div>New Client</div>
</div> </div>
<div className="new-button">Start</div> <div className="button">Start</div>
</div> </div>
) )
} }

2
src/ButtonOld.tsx
View File

@@ -10,7 +10,7 @@ function ButtonOld() {
<div>JOIN WITH THE</div> <div>JOIN WITH THE</div>
<div>OLD CLIENT</div> <div>OLD CLIENT</div>
</div> </div>
<div className="old-button">START</div> <div className="button">START</div>
</div> </div>
</div> </div>
) )

38
src/buttonNew.scss
View File

@@ -29,32 +29,32 @@
text-align: center; text-align: center;
} }
}
.new-button { .button {
display: inline-block; display: inline-block;
user-select: none; user-select: none;
font-size: 18px; font-size: 18px;
width: 226px; width: 226px;
height: 58px; height: 58px;
line-height: 58px; line-height: 58px;
box-sizing: border-box; box-sizing: border-box;
margin: 20px; margin: 20px;
border-radius: 8px; border-radius: 8px;
background: #22a4f3; background: #22a4f3;
background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%); background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
box-shadow: box-shadow:
0 3px 0 0 rgba(0, 82, 175, 0.4), 0 3px 0 0 rgba(0, 82, 175, 0.4),
inset 0 2px 0 0 rgba(255, 255, 255, 0.4); inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
border: 1px solid #003f72; border: 1px solid #003f72;
&:hover { &:hover {
background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%); background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
}
} }
} }

68
src/buttonOld.scss
View File

@@ -48,47 +48,47 @@
text-align: center; text-align: center;
} }
} }
}
.old-button { .button {
display: inline-block; display: inline-block;
user-select: none; user-select: none;
font-size: 40px; font-size: 40px;
-webkit-text-stroke: 6px black; -webkit-text-stroke: 6px black;
paint-order: stroke fill; paint-order: stroke fill;
width: 250px; width: 250px;
height: 100px; height: 100px;
line-height: 100px; line-height: 100px;
box-sizing: border-box; box-sizing: border-box;
margin: 20px; margin: 20px;
border-radius: 22px / 28px; border-radius: 22px / 28px;
background: #0396e5; background: #0396e5;
background: linear-gradient(
0deg,
rgb(3, 150, 229) 0%,
rgb(1, 100, 199) 25%,
rgb(0, 83, 175) 50%,
rgb(77, 176, 243) 100%
);
box-shadow:
#00ccff 3px 1px 0px -1px inset,
#003366 0px 2px 0px 4px,
#00ccff 2.5px 6px 0px 4px,
#00529b -1px -2.5px 0px 5.5px;
&:hover {
background: #0054b0;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
rgb(0, 84, 176) 0%, rgb(3, 150, 229) 0%,
rgb(0, 82, 174) 53%, rgb(1, 100, 199) 25%,
rgb(0, 90, 180) 54%, rgb(0, 83, 175) 50%,
rgb(30, 125, 191) 100% rgb(77, 176, 243) 100%
); );
box-shadow:
#00ccff 3px 1px 0px -1px inset,
#003366 0px 2px 0px 4px,
#00ccff 2.5px 6px 0px 4px,
#00529b -1px -2.5px 0px 5.5px;
&:hover {
background: #0054b0;
background: linear-gradient(
0deg,
rgb(0, 84, 176) 0%,
rgb(0, 82, 174) 53%,
rgb(0, 90, 180) 54%,
rgb(30, 125, 191) 100%
);
}
} }
} }