CSS Creative DIV Shape with Cool Hover Effects

Hey there, I'm SA!

You can see all the codes (along with many more awesome options) by dates, and category filter in SA Coding Store !

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

HTML Code Here :

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <title>CSS Creative DIV Shape with Cool Hover Effects – CSS Hover Effects</title>
</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>

CSS Code Here :

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);
}

Hey there, I'm SA!

Technology

CSS Creative DIV Shape with Cool Hover Effects

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

HTML Code Here :

CSS Code Here :

About SA

Archive

Author Info

Video Of Day