froxxxy/bscscore
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): make 'Neues Spiel' button visually prominent

Browse Source 
- Increased size, padding, and border radius of the button
- Changed background to bold orange with white text
- Added a plus icon before the text
- Added drop shadow and modern hover effect for emphasis

Refs #26
This commit is contained in:
Frank Schwenk
2025-06-24 10:10:38 +02:00
parent 0247c7d384
commit 0b5fa3f697
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/styles/index.css
View File

@@ -37,22 +37,37 @@ input, select {
/* Utility button for new game (global, not component-specific) */ /* Utility button for new game (global, not component-specific) */
.new-game-button { .new-game-button {
width: 100%; width: 100%;
background: #222; background: #ff9800;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 0; border-radius: 12px;
font-size: 1.4rem; font-size: 2rem;
font-weight: 600; font-weight: 700;
padding: 20px 0; padding: 28px 0;
margin-bottom: 16px; margin-bottom: 24px;
cursor: pointer; cursor: pointer;
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s, box-shadow 0.2s;
text-align: center; text-align: center;
display: block; display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 24px rgba(255, 152, 0, 0.25), 0 1.5px 6px rgba(0,0,0,0.12);
letter-spacing: 0.5px;
gap: 16px;
}
.new-game-button::before {
content: '+';
font-size: 2.2rem;
font-weight: 900;
margin-right: 12px;
display: inline-block;
line-height: 1;
} }
.new-game-button:hover { .new-game-button:hover {
background: #333; background: #ffa726;
box-shadow: 0 6px 32px rgba(255, 152, 0, 0.35), 0 2px 8px rgba(0,0,0,0.16);
} }
/* Shared utility classes for buttons and layout */ /* Shared utility classes for buttons and layout */