Este seria el hover que eh venido aplicando pero con algunas correciónes.
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');
body {
height: 100vh;
box-sizing: border-box;
background-color: #000000;
color: #F6F6F6;
}
.titulo-destaque {
color: orange; ;
}
strong {
color: orange;
}
.presentacion {
margin: 10% 18% ;
display: flex;
align-items: center;
justify-content: space-between;
}
.presentacion__contenido{
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
}
.presentacion__contenido__titulo{
font-size: 36px;
font-family: 'Krona One', sans-serif;
}
.presentacion__contenido__texto{
font-size: 24px;
font-family: 'Montserrat', sans-serif;
}
.presentacion__enlaces{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.presentacion__enlaces__subtitulo{
font-family: 'Krona One', sans-serif;
font-weight: 400;
font-size: 24px;
}
.presentacion__enlaces__link{
border: 2px solid orange;
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
}
a {
font-family: 'Montserrat', sans-serif;
border-radius: 16px;
padding: 21.5px 0;
width:280px;
text-align: center;
margin: 10px;
color: rgb(0, 0, 0);
/*Este codigo de aqui abajo lo que hace es eliminar
el subrayado de los enlaces*/
text-decoration: none;
/*Este codigo es solo para añadir sombras*/
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/*este mide el tiempo entre cada transición*/
transition: transform 0.5s ease;
}
/*Esta rregla solo se aplica cuando el cursor
pasa por ensima*/
a:hover{
color: orange;
background-color: aliceblue;
/*este hace que crezca*/
transform: scale(1.05);
}
img{
border-radius: 15px;
margin-top: 50px;
margin-bottom: 25px;
width: 370px;
}