Emplear archivos SVG en nuestros proyectos es una buena idea, no solo por sus magníficas propiedades que lo convierten en una alternativa perfecta para la realización de sitios adaptables, sino también por las opciones que brinda a la hora de aplicar efectos mediante la utilización de filtros desde CSS mezclados con los filtros nativos de SVG.
Una aclaración, la tecnica empleada por el autor de este proyecto funciona perfectamente en Firefox como Chrome, sin embargo podríamos experimentar algunas imperfecciones en otros navegadores no tan modernos, convirtiendo al recurso en una tecnica altamente experimental.
Mientras, la biblioteca completa con sus respectivos botones y efectos la pueden descargar directamente desde Distorted Button Effects.
Botón animado utilizando filtros SVG
Primero que nada necesitamos un botón común y corriente
<button class="button">Click me</button>
Estilizado mediante CSS, el botón quedaría de la siguiente forma:
Luego definimos el filtro nativo sobre SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
<defs>
<filter id="filter">
<feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
</filter>
</defs>
</svg>
Y por último empleamos CSS para activar el filtro SVG:
.button {
/* other styles */
-webkit-filter: url("#filter");
filter: url("/#filter");
}
Obviamente este ejemplo es sumamente básico, sobre todo si se dirigen al apartado Github del proyecto (Distorted Button Effects). Allí, van a encontrar autenticas maravillas de uso, mostrando específicamente lo potente que resulta esta combinación.
No olviden tampoco, visitar Codrops para leer una completa reseña sobre el funcionamiento de los filtros SVG, algo que a mi entender tiene muchísimo potencial.
