index.html

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Distorted Button Effects | Codrops</title>
		<meta name="description" content="A set of inspirational distorted button effects using SVG filters" />
		<meta name="keywords" content="distorted, effect, button, svg, inspiration, filter, web design" />
		<meta name="author" content="Adrien Denat for Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<!--[if IE]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	</head>
	<body>
		<div class="container">
			<header class="codrops-header">
				<div class="codrops-links">
					<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Tutorials/HeatDistortionEffect/" title="Previous Demo"><span>Previous Demo</span></a>
					<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=26866" title="Back to the article"><span>Back to the Codrops article</span></a>
				</div>
				<h1>Distorted <br /> Button Effects <span>Using SVG Filters</span></h1>
				<p class="safari-warning"><strong>Sorry, but these effects are very experimental and currently not supported in your browser.</strong></p>
				<a href="https://github.com/codrops/DistortedButtonEffects/" class="github-corner"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#222; color:#F6F6F6; position:absolute; top:0; border:0; right:0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
			</header>
			<div class="content">
				<section class="section">
					<h3 class="section__title">01</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-goo-1">
								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
								<feComposite in="SourceGraphic" in2="goo" />
							</filter>
						</defs>
					</svg>
					<button id="component-1" class="button button--1">
						Click me
						<span class="button__container">
							<span class="circle top-left"></span>
							<span class="circle top-left"></span>
							<span class="circle top-left"></span>
							<span class="button__bg"></span>
							<span class="circle bottom-right"></span>
							<span class="circle bottom-right"></span>
							<span class="circle bottom-right"></span>
						</span>
					</button>
				</section>
				<section class="section">
					<h3 class="section__title">02</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-goo-2">
								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
								<feComposite in="SourceGraphic" in2="goo" />
							</filter>
						</defs>
					</svg>
					<button id="component-2" class="button button--2" style="filter: url('#filter-goo-2')">
						Click me
						<span class="button__bg"></span>
					</button>
				</section>
				<section class="section">
					<h3 class="section__title">03</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-goo-3">
								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
								<feComposite in="SourceGraphic" in2="goo" />
							</filter>
						</defs>
					</svg>
					<button id="component-3" class="button button--2 button--3" style="filter: url('#filter-goo-3')">
						Click me
						<span class="button__bg"></span>
					</button>
				</section>
				<section class="section">
					<h3 class="section__title">04</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-goo-4">
								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
							</filter>
						</defs>
					</svg>
					<button id="component-4" class="button button--4">
						click
						<span class="button__bg" style="filter: url('#filter-goo-4')">
						<span class="blob"></span>
						<span class="blob"></span>
						<span class="blob"></span>
						<span class="blob"></span>
						</span>
					</button>
				</section>
				<section class="section">
					<h3 class="section__title">05</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-glitch-1">
								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />
								<feOffset dx="-90" dy="-90" result="warpOffset" />
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />
							</filter>
						</defs>
					</svg>
					<button id="component-5" class="button button--5">Click me</button>
				</section>
				<section class="section">
					<h3 class="section__title">06</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-glitch-2">
								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />
								<feOffset dx="-90" dy="-90" result="warpOffset" />
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />
							</filter>
						</defs>
					</svg>
					<button id="component-6" class="button button--6">Click me</button>
				</section>
				<section class="section">
					<h3 class="section__title">07</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-glitch-3">
								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />
								<feOffset dx="-90" dy="-90" result="warpOffset" />
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />
							</filter>
						</defs>
					</svg>
					<button id="component-7" class="button button--7">Click me</button>
				</section>
				<section class="section">
					<h3 class="section__title">08</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-ripple-1">
								<feImage xlink:href="img/ripple.png" x="30" y="20" width="0" height="0" result="ripple"></feImage>
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="20" result="dm" />
								<feComposite operator="in" in2="ripple"></feComposite>
								<feComposite in2="SourceGraphic"></feComposite>
							</filter>
						</defs>
					</svg>
					<button id="component-8" class="button button--8" style="filter: url('#filter-ripple-1')">Click me</button>
					<h5>Based on <a href="http://codepen.io/osublake/pen/WQyBJb" target="_blank">Blake Bowen's</a> code.</h5>
				</section>
				<section class="section">
					<h3 class="section__title">09</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-ripple-2">
								<feImage xlink:href="img/ripple.png" x="30" y="20" width="0" height="0" result="ripple"></feImage>
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="20" result="dm" />
								<feComposite operator="in" in2="ripple"></feComposite>
								<feComposite in2="SourceGraphic"></feComposite>
							</filter>
						</defs>
					</svg>
					<button id="component-9" class="button button--9" style="filter: url('#filter-ripple-2')">Click</button>
				</section>
				<section class="section">
					<h3 class="section__title">10</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-music">
								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />
								<feOffset dx="0" dy="-90" result="warpOffset" />
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />
							</filter>
						</defs>
					</svg>
					<button id="component-10" class="button button--10">
						<span class="button__text">Play</span>
						<span class="button__bg"></span>
					</button>
				</section>
			</div>
			<!-- Related demos -->
			<section class="content content--related">
				<h3>If you enjoyed this demo you might also like:</h3>
				<a class="media-item" href="http://tympanus.net/Development/ButtonStylesInspiration/">
					<img class="media-item__img" src="img/related/ButtonStylesInspiration.png">
					<h3 class="media-item__title">Button Styles and Effects</h3>
				</a>
				<a class="media-item" href="http://tympanus.net/Development/ProgressButtonStyles/">
					<img class="media-item__img" src="img/related/ProgressButtonStyles.png">
					<h3 class="media-item__title">Progress Button Styles</h3>
				</a>
			</section>
		</div>
		<!-- /container -->
		<script src="js/TweenMax.min.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>