- Espaciado y tamaño de los botones
.botones { display: flex; justify-content: space-between; /* Alinea los botones con espacio entre ellos / gap: 15px; / Espaciado consistente entre los botones */ }
.btn { padding: 10px 20px; /* Tamaño adecuado para los botones / font-size: 16px; / Tamaño de fuente / border-radius: 5px; / Bordes redondeados */ border: none; cursor: pointer; }
- Mejorando la visibilidad de los botones
.btn { padding: 12px 24px; font-size: 18px; /* Aumenta el tamaño de la fuente / background-color: #3498db; / Color de fondo azul / color: white; / Texto blanco / border-radius: 5px; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); / Sombra para mejorar visibilidad / transition: background-color 0.3s ease, box-shadow 0.3s ease; / Transición suave */ }
.btn:hover { background-color: #2980b9; /* Cambia el color de fondo al pasar el ratón / box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); / Aumenta la sombra en hover */ }
- Creando una clase común para botones
.btn { padding: 12px 24px; font-size: 16px; border-radius: 8px; /* Bordes más redondeados */ border: none; cursor: pointer; }
.social-btn { background-color: #e4405f; /* Color de fondo para Instagram */ color: white; }
.social-btn:nth-child(2) { background-color: #333; /* Color de fondo para GitHub */ }
- Ajustando el espaciado interno de los botones
.btn { padding: 15px 30px; /* Espaciado adecuado dentro del botón / font-size: 18px; / Ajuste de tamaño de texto */ background-color: #3498db; color: white; border-radius: 5px; border: none; cursor: pointer; }
.social-btn { background-color: #e4405f; }
- Importando y aplicando la fuente correcta
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
.btn { font-family: 'Montserrat', sans-serif; /* Aplica Montserrat a los botones */ padding: 15px 30px; font-size: 18px; background-color: #3498db; color: white; border-radius: 5px; border: none; cursor: pointer; }
