Cómo Personalizar los Botones de AddThis
Voy a considerar los botones de las principales redes sociales que mostraba: Facebook, Pinterest, Twitter, Google+ y su propio botón "+". Si necesitas otros me dices y con gusto los agrego ;)
La ventaja que ofrecen esos botones es que no utilizan imágenes (propiamente en formato de imagen) y el color de fondo es creado con CSS, por lo tanto, podemos personalizarlos fácilmente usando CSS.
El CSS que necesites agregar, lo vas a poner antes de:
</style> del CSS que facilitaba en el paso 1 de la parte 3, donde explico cómo poner los botones.Ahora veamos cómo hacerlo ;)
Crear botones circulares o redondos
En el CSS que facilitaba en el paso 1 de la tercera parte de la guía que refiero al principio, localiza esta linea:
.at-share-tbx-element .at-share-btn{margin-right:12px!important;} En esa regla, ponemos estas propiedades y valores, que servirán para que los botones se pongan redondos:
-moz-border-radius:32px;
-webkit-border-radius:32px;
border-radius:32px;
Entonces quedaría así. Cópiala y sustitúyela:
.at-share-tbx-element .at-share-btn {margin-right:12px!important;-moz-border-radius:32px;-webkit-border-radius:32px;border-radius:32px}Compatibilidad con navegadores: Funciona en todos los navegadores modernos incluyendo IE9. Para versiones antiguas de Firefox: 4.0 (2.0), 1.0 (1.7 o anterior) usamos el prefijo
-moz. Para versiones antiguas de Safari 5.0, 3.0, usamos el prefijo -webkit, lo mismo para Android 2.1. Dichos prefijos no son un estándar (no valida el CSS) pero garantizan la compatibilidad con navegadores antiguos.Cambiar el color de Fondo de los botones
A continuación la regla de CSS que define el color de cada botón para que puedas identificarlo. Tendrás que sustituir el código de color que he resaltado de azul (
#3f3f3f), por el color que necesites.Para el botón de Twitter
a.at-svc-twitter {background:#3f3f3f !important}Para el botón de Google
a.at-svc-google_plusone_share {background:#3f3f3f !important}Para el botón de Facebook
a.at-svc-facebook {background:#3f3f3f !important}Para el botón de Pinterest
a.at-svc-pinterest_share {background:#3f3f3f !important}Para el botón de AddThis
a.at-svc-compact {background:#3f3f3f !important}Si vas a usar el mismo color para todos los botones, "lo mejor es agrupar las reglas de CSS", de tal modo que no las repitamos, pues todos los botones usarán la misma propiedad y valor.
Entonces, para los 5 botones agregaríamos/usaríamos esta única regla de CSS:
a.at-svc-twitter, a.at-svc-google_plusone_share, a.at-svc-facebook, a.at-svc-pinterest_share, a.at-svc-compact {background:#3f3f3f !important}Y editas el código del color que he puesto como:
#3f3f3f.Si por ejemplo no usaras el botón de Addthis, quitarías esta parte:
, a.at-svc-compact (ojo que incluye una coma antes y también hay que eliminarla).Cambiar el color del botón al poner el cursor encima
:hover al final del selector como se aprecia a continuación y usamos la propiedad background para poner el color deseado y agregamos !important para que se aplique:Para el botón de Twitter
a.at-svc-twitter:hover{background:#2ca8d2 !important}Para el botón de Google
a.at-svc-google_plusone_share:hover{background:#ce4d39 !important}Para el botón de Facebook
a.at-svc-facebook:hover{background:#305891 !important}Para el botón de Pinterest
a.at-svc-pinterest_share:hover{background:#c82828 !important}Para el botón deAddThis
a.at-svc-compact:hover{background:#f8694d !important}Nota: En el CSS que facilité en la guía/tutorial donde explicaba cómo ponerlos, puse una regla de CSS que hace que se cree opacidad (que se ponga un poco transparente) en el botón, al poner el cursor encima. Si no lo quieres porque prefieres que cambien de color, elíminala. Es esta:
a.at-share-btn:hover{opacity:0.8}Siéntete libre de comentar cualquier sugerencia, duda o comentario ;)
Etiquetas:Redes Sociales,Tutoriales