button { display: inline-block; margin: 10px; padding: 15px 30px; font-size: 16px; border-radius: 5px; border: none; } Por que funciona?
O margin cria um espaçamento consistente entre os botões. O padding ajusta o espaço interno, tornando os botões visualmente agradáveis. Um tamanho de font-size razoável e bordas arredondadas dão uma aparência mais polida e profissional. button { background-color: #007BFF; /* Um azul chamativo / color: #fff; / Texto branco para contraste */ font-size: 18px; padding: 15px 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; }
button:hover { transform: scale(1.05); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); } .btn { display: inline-block; background-color: #FF5733; /* Laranja vibrante */ color: #fff; font-size: 16px; padding: 10px 20px; border-radius: 50px; text-align: center; text-decoration: none; border: none; }
.btn:hover { background-color: #FF784E; /* Um laranja mais claro no hover / } Instagram GitHub button { padding: 12px 24px; / Ajusta o espaçamento interno / font-size: 16px; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap'); button { font-family: 'Montserrat', sans-serif; font-weight: 600; text-decoration: none; / Remove sublinhado padrão */ color: #fff; } Esses ajustes tornam os botões visualmente elegantes, acessíveis e consistentes com o design do Figma. Ao trabalhar com margens, paddings, fontes e estilos de hover, garantimos que eles não só pareçam bons, mas também ofereçam uma experiência interativa incrível.
