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; } .loading .loader-container { display: flex; }
/* Button-Stile */ /* Button-Style */
.button { .button-share {
--white: #fff; --white: #fff;
cursor: pointer; cursor: pointer;
background: linear-gradient(to bottom, #6e3bff, #7e51ff); background: linear-gradient(to bottom, #6e3bff, #7e51ff);
@ -58,6 +58,33 @@
margin-top: 20px; 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 { .icon path.bm {
stroke-dasharray: 3; stroke-dasharray: 3;
stroke-dashoffset: 3; stroke-dashoffset: 3;
@ -221,56 +248,16 @@
<br/> <br/>
<div align='center'> <div align='center'>
<!-- Spielen-Button --> <!-- Spielen-Button -->
<style> <button class="button" onclick="window.location.href=`/programmieren/spiele/Flappy-Witch/FlappyWitch.html`>
/* Stil für den Button mit eindeutiger Klasse */ <div class="button-inner">
.unique-button { <span class="button-text">Play</span>
transform: scale(2); </div>
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> </button>
</a> </a>
<br/><br/> <br/><br/>
<!-- Neuer Teilen-Button --> <!-- Neuer Teilen-Button -->
<button class="button" onclick="openSharePopup()"> <button class="button-share" onclick="openSharePopup()">
<div class="icon-container"> <div class="icon-container">
<svg viewBox="0 0 24 24" fill="none" class="icon"> <svg viewBox="0 0 24 24" fill="none" class="icon">
<!-- Teilen-Icon --> <!-- Teilen-Icon -->