Button Click Ripples

Button Click Ripples.markdown

Button Click Ripples

A Pen by Ash Whiting on CodePen.

License.

index.html

<div class="btn-red rip">
	<a href="#">
		<div class="btn-inner">
			<div class="text">CLICK MOI</div>
		</div>
	</a>
</div>

script.js

// ----------------------------------------------------------------------
// Polymer style click event
// ----------------------------------------------------------------------

var parent, ink, d, x, y;
$(".rip a, .btn-inner").click(function(e) {

	parent = $(this).parent();

	if (parent.find(".ink").length === 0)
		parent.prepend("<span class='ink'></span>");

	ink = parent.find(".ink");
	ink.removeClass("animate");

	//set size of .ink

	if (!ink.height() && !ink.width()) {
		d = Math.max(parent.outerWidth(), parent.outerHeight());
		ink.css({
			height: d,
			width: d
		});
	}

	x = e.pageX - parent.offset().left - ink.width() / 2;
	y = e.pageY - parent.offset().top - ink.height() / 2;

	ink.css({
		top: y + 'px',
		left: x + 'px'
	}).addClass("animate");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
	margin:30px;
	background:black;
}

$font-family-bold:"Helvetica", Arial, sans-serif;

.btn-red {
	position:relative;
	font-size:14px;
	display:inline-block;
	color:red;
	font-family:$font-family-bold;
	cursor:pointer;
	margin-right:-66px;
	transition:all 0.4s ease;
	background:red;
	border-radius:10px;
	
	a {
		color:white!important;
		line-height:66px;
		height:66px;
		display:block;
		position:relative;
		overflow:hidden;
		padding-left:20px;
		padding-right:66px;
		text-decoration:none;
	

		&:hover,
		&:focus,
		&:link,
		&:visited {
			color:yellow;
			text-decoration:none;
		}

		.btn-inner {
			position:relative;
			transition:all 0.4s ease;

			&:after {
				position:absolute;
				font-family: 'FontAwesome';
				content:"\f105";
				color:white;
				width:66px;
				height:66px;
				background:red;
				text-align:Center;
				font-size:41px;
				right:-66px;
				line-height:66px;
				transition:all 0.4s ease;
				text-indent:0;
				top:0;
				border-top-right-radius:5px;
				border-bottom-right-radius:5px;

			}

			&:hover,
			&:focus {
				color: darken(#ffffff, 8%);

				&:after {
					text-indent:5px;
				}
			}

			.text {
				padding-right:20px;
			}
		}
	}
}

.rip {
	overflow:hidden;
	position:relative;
}

.ink {
	display: block;
	position: absolute;
	background: black;
	border-radius: 100%;
	transform: scale(0);
	z-index:1000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	opacity:0.2;
}

.animate {
	animation: ripple 0.65s ease;
}

@keyframes ripple {

	100% {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		opacity: 0;
		transform: scale(1.5);
	}
}