Me estoy quedando sin ideas chicas, esto es lo último que se me ha ocurrido y no sé si a alguien le va a interesar la verdad. Pero bueno, bienvenidas a un nuevo viernes de tutorialessss!!
Hoy os voy a dejar el código se este botón y ahí vosotras ya cambiáis lo que queráis. Perdonadme si no explico todo con mucho detalle es que entre que no me apetece y que no tengo tiempo pues ahí os lo dejo mis niñas <3
El código es este:
<style>
.business-student {
width: 100%;
max-width: 300px;
margin: 12px auto;
box-sizing: border-box;
text-decoration: none !important;
display: block;
font-family: 'Cormorant Garamond', serif;
}
.business-student-box {
position: relative;
overflow: hidden;
padding: 17px 20px;
border-radius: 4px;
background: linear-gradient(
135deg,
#d01ba9 0%,
#df42bd 48%,
#ef76d2 100%
);
border: 1px solid rgba(255,255,255,0.65);
box-shadow:
0 6px 18px rgba(208,27,169,0.22),
inset 0 0 0 1px rgba(255,255,255,0.12);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
/* brillo que recorre el botón */
.business-student-box::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 70%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.20),
transparent
);
transform: skewX(-20deg);
transition: left 0.65s ease;
}
/* pequeño detalle superior */
.business-student-box::after {
content: "";
position: absolute;
top: 0;
left: 20px;
width: 34px;
height: 2px;
background: rgba(255,255,255,0.85);
transition: width 0.35s ease;
}
.business-student-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.business-student-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.business-student-small {
font-family: 'Syncopate', sans-serif;
font-size: 7px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
}
.business-student-title {
font-family: 'Cormorant Garamond', serif;
font-size: 23px;
font-weight: 600;
letter-spacing: 0.3px;
color: #ffffff;
line-height: 1;
}
.business-student-arrow {
width: 29px;
height: 29px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.65);
border-radius: 50%;
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 15px;
transition:
transform 0.35s ease,
background 0.35s ease;
}
.business-student:hover .business-student-box {
transform: translateY(-3px);
box-shadow:
0 10px 25px rgba(208,27,169,0.30),
inset 0 0 0 1px rgba(255,255,255,0.18);
}
.business-student:hover .business-student-box::before {
left: 150%;
}
.business-student:hover .business-student-box::after {
width: 55px;
}
.business-student:hover .business-student-arrow {
transform: translateX(4px);
background: rgba(255,255,255,0.15);
}
.business-student:active .business-student-box {
transform: translateY(-1px);
}
</style>
<a
class="business-student"
href="URL_ETIQUETA"
target="_self"
aria-label="Estudiante de negocios"
>
<div class="business-student-box">
<div class="business-student-content">
<div class="business-student-text">
<span class="business-student-small">
APRENDE · CRECE · EMPRENDE
</span>
<span class="business-student-title">
Estudiante de negocios
</span>
</div>
<div class="business-student-arrow">
→
</div>
</div>
</div>
</a
>
Bien, lo voy a explicar rápido: donde ponga font-size es donde puedes cambiar el tamaño de lo que sea (letra o el gadget como tal); donde ponga font-family es donde puedes cambiar la tipografía de la letra; donde ponga color pues se cambiar el color obvio; donde pone "URL_ETIQUETA" deberás poner el url de tu blog y añadir /seach/label/etiqueta (donde he escrito etiqueta pon la tuya lol); por último, en donde están los escritor puedes poner lo que quieras.
Y ya está jajaja, tuto-lite espero que os haya servido de algo.
No hay comentarios:
Publicar un comentario