Button Design
Design de botões
Código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeria de Botões Escuros</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #2c2c2c;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
color: #f0f0f0;
}
h1 {
margin-bottom: 20px;
color: #e0e0e0;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
width: 80%;
}
.button {
border: none;
color: white;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
font-size: 16px;
padding: 15px;
}
/* Estilos dos botões com cores escuras */
.button1 {
background: linear-gradient(45deg, #1f1c2c, #928DAB);
border-radius: 8px;
}
.button2 {
background: linear-gradient(45deg, #3a3a3a, #4e4e4e);
border-radius: 50%;
}
.button3 {
background: linear-gradient(45deg, #2a2a72, #009ffd);
border-radius: 12px;
}
.button4 {
background: linear-gradient(45deg, #4e4e4e, #6b6b6b);
border-radius: 30px;
}
.button5 {
background: linear-gradient(45deg, #232526, #414345);
border-radius: 0;
}
.button6 {
background: linear-gradient(45deg, #4a4a4a, #e8e8e8);
border-radius: 15px 0 15px 0;
}
.button7 {
background: linear-gradient(45deg, #2a2a72, #009ffd);
border-radius: 50% 0 50% 0;
}
.button8 {
background: linear-gradient(45deg, #3c3c3c, #6e6e6e);
border-radius: 20px;
}
.button9 {
background: linear-gradient(45deg, #2c3e50, #4ca1af);
border-radius: 10px 10px 0 0;
}
.button10 {
background: linear-gradient(45deg, #1f1c2c, #928DAB);
border-radius: 0 10px 10px 0;
}
.button11 {
background: linear-gradient(45deg, #3a3a3a, #4e4e4e);
border-radius: 25px;
}
.button12 {
background: linear-gradient(45deg, #232526, #414345);
border-radius: 5px;
}
.button13 {
background: linear-gradient(45deg, #4a4a4a, #e8e8e8);
border-radius: 10px 0 10px 0;
}
.button14 {
background: linear-gradient(45deg, #2c3e50, #4ca1af);
border-radius: 10px 10px 10px 10px;
}
.button15 {
background: linear-gradient(45deg, #1f1c2c, #928DAB);
border-radius: 20px 0 20px 0;
}
.button16 {
background: linear-gradient(45deg, #3c3c3c, #6e6e6e);
border-radius: 30px 30px 0 0;
}
.button17 {
background: linear-gradient(45deg, #2a2a72, #009ffd);
border-radius: 0 30px 0 30px;
}
.button18 {
background: linear-gradient(45deg, #4e4e4e, #6b6b6b);
border-radius: 50% 50% 0 0;
}
.button19 {
background: linear-gradient(45deg, #232526, #414345);
border-radius: 15px 0 0 15px;
}
.button20 {
background: linear-gradient(45deg, #3c3c3c, #6e6e6e);
border-radius: 10px 10px 20px 20px;
}
/* Efeito hover */
.button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1>Galeria de Botões Escuros</h1>
<div class="gallery">
<button class="button button1">Botão 1</button>
<button class="button button2">Botão 2</button>
<button class="button button3">Botão 3</button>
<button class="button button4">Botão 4</button>
<button class="button button5">Botão 5</button>
<button class="button button6">Botão 6</button>
<button class="button button7">Botão 7</button>
<button class="button button8">Botão 8</button>
<button class="button button9">Botão 9</button>
<button class="button button10">Botão 10</button>
<button class="button button11">Botão 11</button>
<button class="button button12">Botão 12</button>
<button class="button button13">Botão 13</button>
<button class="button button14">Botão 14</button>
<button class="button button15">Botão 15</button>
<button class="button button16">Botão 16</button>
<button class="button button17">Botão 17</button>
<button class="button button18">Botão 18</button>
<button class="button button19">Botão 19</button>
<button class="button button20">Botão 20</button>
</div>
<script>
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', () => {
alert(`Você clicou no ${button.textContent}`);
});
});
</script>
</body>
</html>