<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Modernes Dashboard</title>
<style>
:root {
--button-1: #fddede;
--button-2: #def5fd;
--button-3: #eafddf;
--text-color: #333;
--hover-1: #fcbcbc;
--hover-2: #b8e7fa;
--hover-3: #d0f2c3;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', sans-serif;
background: #fffefc;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.dashboard {
display: flex;
gap: 40px;
}
.card-button {
width: 200px;
height: 200px;
border-radius: 30px;
border: none;
font-size: 1.2rem;
font-weight: 600;
color: var(--text-color);
cursor: pointer;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.card-button:nth-child(1) {
background-color: var(--button-1);
}
.card-button:nth-child(2) {
background-color: var(--button-2);
}
.card-button:nth-child(3) {
background-color: var(--button-3);
}
.card-button:nth-child(1):hover {
background-color: var(--hover-1);
}
.card-button:nth-child(2):hover {
background-color: var(--hover-2);
}
.card-button:nth-child(3):hover {
background-color: var(--hover-3);
}
</style>
</head>
<body>
<div class="dashboard">
<button class="card-button">Start</button>
<button class="card-button">Produkte</button>
<button class="card-button">Profil</button>
</div>
</body>
</html>