b-ma/radial-action.html

## radial-action.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>css</title>
    <style>
        a {
            display: block;
            border :1px solid #787878;
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            text-align: center;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.96);
            text-transform: uppercase;
            font-family: arial;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
            background-color: #455ede;
            transition: background-color 500ms;
        }

        a i {
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            border-radius: 100%;
            opacity: 0.5;
            transform: scale(0);
            background: #d0d9ff;
        }

        a:hover {
            background-color: #4e6cef;
        }

        a:hover i {
            transition: transform 500ms, opacity 800ms;
            transform: scale(2);
            opacity: 0;
        }
    </style>
</head>
<body>
    <a href="#">test<i></i></a>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    $('a').on('mouseenter', function(e) {
        e.preventDefault();
        var x = e.offsetX;
        var y = e.offsetY;
        var side = $(this).width();
        $(this).children('i').css({ top: y - (side / 2), left: x - (side / 2) });
    });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>css</title>
	<style>
	a {
	display: block;
	border :1px solid #787878;
	width: 300px;
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.96);
	text-transform: uppercase;
	font-family: arial;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
	background-color: #455ede;
	transition: background-color 500ms;
	}

	a i {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	border-radius: 100%;
	opacity: 0.5;
	transform: scale(0);
	background: #d0d9ff;
	}

	a:hover {
	background-color: #4e6cef;
	}

	a:hover i {
	transition: transform 500ms, opacity 800ms;
	transform: scale(2);
	opacity: 0;
	}
	</style>
	</head>
	<body>
	<a href="#">test<i></i></a>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
	$('a').on('mouseenter', function(e) {
	e.preventDefault();
	var x = e.offsetX;
	var y = e.offsetY;
	var side = $(this).width();
	$(this).children('i').css({ top: y - (side / 2), left: x - (side / 2) });
	});
	</script>
	</body>
	</html>