Animated Material Design Button

Animated Material Design Button.markdown

Animated Material Design Button

No JS

A Pen by Martijn Brands on CodePen.

License.

index.html

<h1>Animated Material Design Button</h1>

<div class="menu-button"><i class="zmdi zmdi-share"></i>
	<a href="https://twitter.com/martini_b" target="blank"><i class="zmdi zmdi-twitter"></i></a>
	<a href="https://plus.google.com/" target="blank"><i class="zmdi zmdi-google-plus"></i></a>
	<a href="http://codepen.io/MartijnBrands/" target="blank"><i class="zmdi zmdi-codepen"></i>	</a>
</div>

style.css

@import 'bourbon';

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);

body{
	background:#A7FFEB;
}

h1{
	font-family: 'Roboto', sans-serif;
	font-weight:500;
	font-size:32px;
	color:#212121;
	padding:50px;
	text-align:center;
	line-height:135%;
	
}

.menu-button{
	@include transition(.4s);
	position:absolute;
	right:30px;
	bottom:30px;
	width:60px;
	height:60px;
	text-align:center;
	line-height:60px;
	border-radius:50%;
	background-color:#E91E63;
	color:#FFFFFF;
	font-size:24px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
	cursor:pointer;
	&:hover{
		background:darken(#E91E63,5%);
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 4px 15px 0 rgba(0, 0, 0, 0.25);
	}
	a{
		@include transition(.4s);
		opacity:0;
		width:0px;
		height:0px;
		text-align:center;
		line-height:50px;
		border-radius:50%;
		color:#FFFFFF;
		font-size:24px;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
		cursor:pointer;
		&:hover{
			box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 4px 15px 0 rgba(0, 0, 0, 0.25);
		}
		&:nth-child(2){
			@include transition-delay(0.3s);			
			position:absolute;
			right:30px;
			bottom:30px;
			background:#55acee;
		}
		&:nth-child(3){
			@include transition-delay(0.4s);
			position:absolute;
			right:30px;
			bottom:30px;
			background:#dc4e41;
		}
		&:nth-child(4){
			@include transition-delay(0.5s);
			position:absolute;
			right:30px;
			bottom:30px;
			background:#3F3F3F;
		}
	}
	&:hover{
		a{
			opacity:1;
			width:50px;
			height:50px;
			&:nth-child(2){
				right:80px;
				bottom:0px;
				&:hover{
					@include transition-delay(0s);
					background:darken(#55acee,5%);
				}
			}
			&:nth-child(3){
				right:65px;
				bottom:65px;
				&:hover{
					@include transition-delay(0s);
					background:darken(#dc4e41,5%);
				}
			}
			&:nth-child(4){
				right:0px;
				bottom:80px;
				&:hover{
					@include transition-delay(0s);
					background:darken(#3F3F3F,5%);
				}
			}
		}
	}
}