Text with hover changing background.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creative ZigZag Div Shape With Awesome Hover Effects</title>
<link rel="stylesheet" href="rectangle.css">
<style type="text/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);
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-9378326636860315",
enable_page_level_ads: true
});
</script>
</head>
<body>
<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>
</body>
</html>