br0tkasten/test.creative-crafter.de
1
0
Fork 0
Code

button style

Browse Source
This commit is contained in:
matt 2025-02-01 17:20:14 +01:00
parent 08e7e94085
commit f46201ca50
1 changed files with 34 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
programmieren/spiele/Flappy-Witch/index.html
View File

@ -39,8 +39,8 @@
.loading .loader-container { display: flex; }
/* Button-Stile */
.button {
/* Button-Style */
.button-share {
--white: #fff;
cursor: pointer;
background: linear-gradient(to bottom, #6e3bff, #7e51ff);
@ -58,6 +58,33 @@
margin-top: 20px;
}
.button {
padding: 16px 32px; /* Doppelte Größe */
border-radius: 8px;
background: linear-gradient(to bottom, #007bff, #0056b3); /* Blau */
box-shadow: 0 2px 4px rgba(0,0,0,0.7);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px; /* Abstand zum oberen Inhalt */
}
.button:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}
.button:active {
box-shadow: 0 0px 1px rgba(0,0,0,0.8);
transform: scale(0.995);
}
.button-text {
font-weight: 600;
color: white;
font-size: 1.5em; /* Textgröße anpassen */
}
.icon path.bm {
stroke-dasharray: 3;
stroke-dashoffset: 3;
@ -221,56 +248,16 @@
<br/>
<div align='center'>
<!-- Spielen-Button -->
<style>
/* Stil für den Button mit eindeutiger Klasse */
.unique-button {
transform: scale(2);
background: linear-gradient(to bottom, #606060, #505050); /* Grau Hintergrund */
border-radius: 12px;
padding: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
transition: all 200ms;
}
.unique-button:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}
.unique-button:active {
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.8);
transform: scale(0.995);
}
/* Stil für den inneren Button-Text */
.unique-button .button-inner {
background: linear-gradient(to bottom, #0000FF, #0000CD); /* Blau Hintergrund für den inneren Bereich */
border-radius: 8px;
padding: 10px 20px;
}
.unique-button .button-text {
color: white;
font-size: 16px;
font-weight: bold;
}
</style>
<div class="flex justify-center items-center gap-12 h-full">
<div class="bg-gradient-to-b from-gray-800/40 to-transparent p-[4px] rounded-[16px]">
<button class="unique-button" onclick="window.location.href='/programmieren/spiele/Flappy-Witch/FlappyWitch.html'">
<div class="button-inner">
<span class="button-text">Get Started</span>
</div>
</button>
</div>
</div>
<button class="button" onclick="window.location.href=`/programmieren/spiele/Flappy-Witch/FlappyWitch.html`>
<div class="button-inner">
<span class="button-text">Play</span>
</div>
</button>
</a>
<br/><br/>
<!-- Neuer Teilen-Button -->
<button class="button" onclick="openSharePopup()">
<button class="button-share" onclick="openSharePopup()">
<div class="icon-container">
<svg viewBox="0 0 24 24" fill="none" class="icon">
<!-- Teilen-Icon -->