How to create Instagram Icon in HTML & CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram Icon in CSS3</title>
<style type="text/css">
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
height:100vh;
display:grid;
place-items:center;
background-color:#000000;
}
.IG {
width:45px;
height:45px;
background:transparent;
border-radius:12px;
border:3px solid aqua;
display:flex;
justify-content:center;
align-items:center;
position:relative;
cursor:pointer;
}
.IG:before{
content:"";
height:13px;
width:13px;
border-radius:50%;
border:3px solid aqua;
}
.IG:after{
content:"";
position:absolute;
top:5px;
right:6px;
border-radius:50%;
border:2px solid aqua;
}
</style>
</head>
<body>
<div class="IG"></div>
</a>
</body>
</html>
Comments
Post a Comment