CSS Creative DIV Shape with Cool Hover Effects – CSS Hover Effects

CSS Creative DIV Shape with Cool Hover Effects – CSS Hover Effects

Html


<div>
	<p>Lorem ipsum dolor sit amet, nullam phaedrum vel ut. Eum no mutat accusata temporibus, wisi facer forensibus mel ex. Inermis suscipit salutatus te pri, ut vis tractatos interpretaris. Sint accusata mea an, ne mea convenire interesset. At dico facer utamur pro.</p>
</div>

CSS


body
{
	margin: 0;
	padding: 0;
}
div
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 300px;
	height: 300px;
	border-radius: 50%;
	box-shadow: 0 0 0 15px #03a9f4;
	background: #fff;
	box-sizing: border-box;
	text-align: center;
	transition: .5s;
}
div:hover
{
	border-radius: 0;
}
div:before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #03a9f4;
	z-index: -1;
	transform: rotate(-45deg);
	border-radius: 10px;
}
div p
{
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 16px;
	padding: 20px;
	font-family: sans-serif;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: .5s;
}
div:hover p
{
	box-shadow: 0 0 50px rgba(0,0,0,.5);
}

See Demo

Leave a Comment