A CodePen by atomicpages.

index.html

	<div class="snowman">
		<div class="head">
			<div class="eyes">
				<div class="eye left"></div>
				<div class="eye right"></div>
			</div>
			<div class="nose">
				<div class="inner"></div>
			</div>
			<div class="mouth">
				<div class="inner"></div>
			</div>
		</div>
		<div class="arm left">
			<div class="hand">
				<div class="finger one"></div>
				<div class="finger two"></div>
				<div class="finger three"></div>
			</div>
		</div>
		<div class="arm right">
			<div class="hand">
				<div class="finger one"></div>
				<div class="finger two"></div>
				<div class="finger three"></div>
			</div>
		</div>
		<div class="middle">
			<div class="inner">
				<div class="button top">
					<div class="highlight"></div>
				</div>
				<div class="button center">
					<div class="highlight"></div>
				</div>
				<div class="button floor">
					<div class="highlight"></div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="inner">
				<div class="button top">
					<div class="highlight"></div>
				</div>
				<div class="button floor">
					<div class="highlight"></div>
				</div>
			</div>
		</div>
	</div>

script.js

document.body.className  = "lightBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({shadow : true, round : true,  minSize: 5, maxSize:8}); // add shadows

style.scss

@import "compass/css3";

body { background: #666; }

// CHANGE ME!!
$base: 300px;

// VARIABLES
$snowColor: #f0f0f0;
// $snowColor: gray;
$buttonColor: #0e74bc;
$eyeColor: black;
$noseColor: red;

@mixin bg_color() {
	background-color: #f0f0f0;
	@include filter-gradient(#f0f0f0, #d8d8d8, horizontal);
	$experimental-support-for-svg: true;
	@include background-image(radial-gradient(center, ellipse cover, #f0f0f0 0%,#d8d8d8 100%));
}

@mixin rotate($deg) {
	// transform: rotate(2deg);
	transform: rotate($deg);
	-ms-transform: rotate($deg);
	-moz-transform: rotate($deg);
	-webkit-transform: rotate($deg);
	-o-transform: rotate($deg);
}

.snowman {
	// border: 1px solid black;
	margin: 10px auto;
	width: $base;
	z-index: 20;
	.head {
		position: relative;
		height: round($base / 3);
		width: round($base / 3);
		margin: 0 auto;
		.eyes {
			position: relative;
			z-index: 15;
			.eye {
				position: relative;
				background: $eyeColor;
				height: floor($base / 20);
				width: floor($base / 20);
				@include border-radius(round($base / 10));
				z-index: 15;
			  }
			.left {
				float: left;
				margin: round($base / 15) 0 0 round($base / 15);
			}
			.right {
				float: right; 
				margin: round($base / 15) round($base / 15) 0 0
			}
		}
		.nose {
			position: relative;
			margin: 0 auto;
			width: $base / 15;
			height: $base / 15;
			background-color: #d33b30;
			@include filter-gradient(#d33b30, #c40003, horizontal);
			$experimental-support-for-svg: true;
			@include background-image(radial-gradient(center, ellipse cover,  #d33b30 0%,#c40003 100%));
			padding: round($base / 100) round($base / 50);
			position: relative;
			top: round($base / 7);
			@include border-radius($base / 5);
			@include box-shadow(lighten($snowColor, 10%) 2px 2px 5px);
			z-index: 10;
			.inner {
				position: relative;
				background: white;
				height: round($base / 30);
				width: round($base / 30);
				@include border-radius($base / 5);
				float: right;
				opacity: 0.6;
				z-index: 15;
			}
		}
		.mouth {
			position: relative;
			margin: 0 auto;
			padding-top: round($base / 60);
			height: round($base / 4);
			width: round($base / 4);
			border: round($base / 75) dashed black;
			@include border-radius($base / 5);
			bottom: round($base / 15);
			.inner {
				@include bg_color();
				height: round(($base / 3) * 0.85);
				width: round(($base / 3) * 0.85);
				@include border-radius(round($base / 1.5));
				position: relative;
				bottom: round($base / 21.42);
				right: round($base / 60);
			}
		}
	}
	.middle {
		position: relative;
		height: round($base / 1.5);
		width: round($base / 1.5);
		margin: 0 auto;
	}
	.bottom {
		position: relative;
		height: $base;
		width: $base;
		margin: 0 auto;
	}
	.middle,
	.bottom {
		.inner { padding-top: round($base / 15); }
		.button {
			position: relative;
			height: round($base / 15);
			width: round($base / 15);
			background: $buttonColor;
			border: medium solid darken($buttonColor, 20%);
			@include border-radius(round($base / 10));
			margin: round($base / 20) auto;
			@include box-shadow(lighten($snowColor, 10%) 1px 1px 0px);
			.highlight {
				height: round(($base / 15) * 0.95);
				width: round(($base / 15) * 0.95);
				background: darken($buttonColor, 10%);
				@include border-radius(round($base / 10));
				position: relative;
				top: 2px;
				float: right;
			}
		}
		.top { margin-top: 0; }
	}
	.head,
	.middle,
	.bottom {
		position: relative;
		@include bg_color();
		@include border-radius(round($base / 1.5));
		z-index: 10;
	}
	.arm {
		position: relative;
		height: round($base / 1.5);
		width: round($base / 50);
		background: black;
		z-index: 0;
		.hand {
			.finger {
				height: round($base / 10);
				width: round($base / 50);
				background: black;
			}
			.finger.one {
				@include rotate(45deg);
				position: relative;
				bottom: round($base / 12);
				left: round($base / 30);
			}
			.finger.two {
				@include rotate(0deg); 
				position: relative;
				bottom: round($base / 5);
				left: 0;
			}
			.finger.three {
				@include rotate(-45deg);
				position: relative;
				bottom: round($base / 3.75);
				right: round($base / 30);
			}
		}
	}
	.arm.left {
		margin-top: 20px;
		float: left;
		@include rotate(225deg);
	}
	.arm.right {
		margin-top: 20px;
		float: right; 
		@include rotate(-225deg);
	}
}