conofor

CSS3 toggle buttons

CSS3 toggle buttons that could be plugged into radio buttons. Using Bootstrap Glyphicons but if your font of choice has symbols can include them instead

A Pen by Michael Watts on CodePen.

License.

Particle Text

Canvas pixel manipulation using typed arrays

Particles react to mouse movement

A Pen by Igor on CodePen.

	<button class="button">
	<span class="default">Send</span>
	<span class="success">Sent</span>
	<div class="left"></div>
	<div class="right"></div>
	</button>

	<!-- dribbble - twitter -->
	<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
	<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.

	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	</head>
	<body>
	<ul>
	<li>
	<label>

	<div class="social"><a href="https://twitter.com/rominamartinlib?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-screen-name="false" data-dnt="true" data-show-count="false">Follow @rominamartinlib</a>
	</div>
	<div class="options">
	<button id="americano">Americano</button>
	<button id="au_lait">Au lait</button>
	<button id="capuccino">Capuccino</button>
	<button id="corretto">Corretto</button>
	<button id="espresso">Espresso</button>
	<button id="latte">Latte</button>
	<button id="lungo">Lungo</button>

	-
	var BLOOD_TYPES = ["O−", "O+", "A−", "A+", "B−", "B+", "AB−", "AB+"];

	mixin bloodSelector(value)
	div= value

	mixin bloodTypeMixin(value, side)
	.human(class=side)
	.scribble
	span.blood_type= value

	<h1>ALL BOOBS ARE GOOD BOOBS</h1>
	<div id="container">
	<div></div>
	<div></div>
	</div>

	<a href="https://twitter.com/rominamartinlib" target="_blank">
	<svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
	<path d="
	M 630, 425

	<textarea rows="1">Here is a very long value for testing auto height</textarea>

	<pre><code class="language-js">document.querySelectorAll('textarea').forEach(el => {
	el.style.height = el.setAttribute('style', 'height: ' + el.scrollHeight + 'px');
	el.classList.add('auto');
	el.addEventListener('input', e => {
	el.style.height = 'auto';
	el.style.height = (el.scrollHeight) + 'px';
	});
	});</code></pre>

	doctype html
	html(lang="es", dir="ltr")
	head
	meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0")
	meta(charset="utf-8")
	link(rel="stylesheet", type="text/css", href="main.css")
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap" rel="stylesheet">

	body

	-2.times do
	.organism
	-100.times do
	.atom