1. Tu nombre con efecto degradado al pasar el mouse

HTML

Consultoria Sst

CSS

.mi-nombre {
font-size: 48px;
font-weight: 800;
color: #1d3557;
transition: .3s ease;
}
.mi-nombre:hover {
background: linear-gradient(90deg, #22D4FD, #9b5de5, #f15bb5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 18px rgba(34,212,253,.25);
}

1. Botón de redes con elevación y borde animado

HTML

Instagram

CSS

.btn-red {
display:inline-block;
text-decoration:none;
padding:14px 24px;
font:600 16px/1.2 'Montserrat', sans-serif;
color:#F6F6F6;
background:#1d3557;
border:2px solid #22D4FD;
border-radius:10px;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-red:hover {
transform: translateY(-2px);
background:#274a82;
box-shadow:0 10px 18px rgba(0,0,0,.18);
}
/* accesibilidad con teclado */
.btn-red:focus-visible {
outline:3px solid #22D4FD;
outline-offset:2px;
}

1. Imagen de perfil: de gris a color con zoom suave

HTML

CSS

.avatar {
width:220px; height:auto;
border-radius:12px;
filter: grayscale(100%);
transform: scale(1);
transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.avatar:hover {
filter: grayscale(0%);
transform: scale(1.04);
box-shadow:0 12px 24px rgba(0,0,0,.18);
}