Añade Efecto cortina con CSS al plugin Click To Tweet

En esta ocasión he personalizado el estilo del plugin de WordPress Click To Tweet con un bonito efecto cortina con CSS que aparece cuando pasamos el cursor del ratón por encima.

Descarga del Plugin Click To Tweet

El Plugin Click To Tweet se puede descargar pinchando en la siguiente imagen:

Aplicando el efecto cortina con CSS

El efecto a conseguir es el siguiente. He creado unas grabaciones Gif del antes y el después para que se vea cómo quedaría tras aplicar los CSS correspondientes.

El antes:

Y el después:

Como podéis ver es un bonito efecto que hace que atraiga la atención del usuario cuando pase el ratón por encima y se vea con ganas de querer compartir nuestro artículo mediante un tweet. De esta manera podemos captar nuevos visitantes a nuestro blog.

Si queréis saber qué estilos se deben aplicar aquí os dejo el código.

/*
==== Estilos de Plugins =====
*/


/*
Plugin Click To Tweet
-----------------------
Estilos personalizados del plugin Click To Tweet
Se ha personalizado para cuando pase el ratón por encima cambie de blanco a azul todo el recuadro como si se cierra una persiana.
El color del texto pasa de ser gris a ser blanco.

Con añadir esto al stile del child-theme es suficiente.
*/

.tm-click-to-tweet .tm-ctt-text a {
margin: 0;
padding: 0;
position: relative;
color: #999999; /*JAVI no tocar texto del tweet*/
font-size: 24px;
line-height: 140%;
text-transform: none;
letter-spacing: 0.05em;
font-weight: 100;
text-decoration: none;
text-transform: none;
}
.tm-click-to-tweet .tm-ctt-text a:hover {
text-decoration: none;
color: white; /*JAVI #666666;*/
}
.tm-click-to-tweet a.tm-ctt-btn {
margin: 0;
padding: 0;
position: relative;
display: block;
text-transform: uppercase;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; /*JAVI 12px*/
font-weight: bold;
line-height: 100%;
color: #999999; /*JAVI no tocar. Texto 'Click to tweet'*/
float: right;
padding-right: 24px;
text-decoration: none;
/*background: transparent url(../img/twitter-little-bird.png) no-repeat right top;*/
}
.tm-click-to-tweet a.tm-ctt-btn:hover {
text-decoration: none;
color: white; /*#666666; /*JAVI*/
text-transform: uppercase;
}
.tm-click-to-tweet .tm-powered-by {
font-size: 10px;
color: white; /*#999999; JAVI*/
}
.tm-click-to-tweet .tm-powered-by a {
font-size: 10px;
color: white /*#999999*/ !important; /*JAVI*/
}
.tm-click-to-tweet .tm-powered-by a:hover {
color: white /*#999999*/ !important; /*JAVI*/
text-decoration: underline !important;
}

/*JAVI Parte nueva que hace el efecto persiana cuando se pasa el cursor por encima */
.tm-click-to-tweet:hover::before,
.tm-click-to-tweet:focus::before,
.tm-click-to-tweet:active::before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.tm-click-to-tweet::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098d1; /* Color azul de la persiana */
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}

.tm-click-to-tweet {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}

/* Esto ultimo cambia el color del texto cuando me posiciono dentro del div contenedor y hace que se mantenga en blanco mientras el cursor siga dentro del recuadro */
div.tm-click-to-tweet:hover a {
text-decoration: none;
/*color: #666666;*/
color:white;
}

Con añadir este código en tu Child Theme será suficiente para que los estilos con efecto cortina se apliquen correctamente.

Si te ha gustado ya puedes compartirlo en tus redes sociales.