Instagram Logo/Icon using HTML and CSS
Last Updated :
04 Mar, 2024
An animated representation of the Instagram logo using HTML and CSS is displayed as a colorful circular shape with a radial gradient background. Hovering over the logo triggers a subtle upward movement. The white highlights and the text “Instagram Logo” add to the visual appeal and provide context. The project showcases a visually appealing and interactive representation of the Instagram logo using HTML and CSS.
Preview Image: Let us have a brief look at how the Logo/Icon will look like
Preview
Approach to create Instagram Logo/Icon
- Create the basic structure of the project using HTML elements and style them with an external stylesheet.
- Inside the <body>, we used a <div> with the class “box”. Within the “box”, there’s another <div> with the class named “Instagram”. The “Instagram” div contains a <span> (empty element) and a <p> (paragraph) with the text “Instagram Logo”.
- The box is used to Style the “box” div. Relative allows positioning of child elements relative to this div, display flex arranges child elements in a row, justify-content is used to center horizontally the content, The items are aligned center vertically centers the content, min-height is given as 100vh ensures the div takes at least the full viewport height.
- The .instagram is used for Styling the “Instagram” div. Absolute positions are used within the “box”, Width and height are set as 160px and 160px respectively, and Radial-gradient creates a circular gradient background.
- The::after and:: before pseudo-elements create circular shapes in the top right corner. The class .instagram::after Styles the::after pseudo-element, It creates a circular border with a white color, positioned at the top right corner.
- The .instagram::before0 Styles the::before pseudo-element, It creates a smaller circular border with a white color, positioned slightly below and to the right of the main circle. Span styles the <span> element, It creates a small white dot, positioned at the top right corner of the “Instagram” div.
Example: Illustration of creating an Instagram logo using HTML and CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>INSTAGRAM</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="instagram">
<span></span>
<p>
Instagram Logo
</p>
</div>
</div>
</body>
</html>
|
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #232323;
overflow: hidden;
}
.box {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.instagram {
position: absolute;
width: 160px;
height: 160px;
background: radial-gradient(circle at 30% 110%,
#ffdb8b 0%,
#ee653d 25%,
#d42e81 50%,
#a237b6 75%,
#3e57bc 100%);
border-radius: 37px;
box-shadow: 0px 15px 40px 1px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
transition: .2s linear;
}
.instagram:hover {
transform: translateY(-10px);
}
.instagram::after {
content: "";
position: absolute;
top: 23px;
right: 22px;
border: 7px solid #fff;
height: 100px;
width: 100px;
border-radius: 25px;
}
.instagram::before {
content: "";
position: absolute;
top: 49px;
right: 49px;
border: 8px solid #fff;
height: 43px;
width: 45px;
border-radius: 50%;
}
span {
position: absolute;
display: block;
top: 40px;
right: 40px;
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 50%;
}
p {
position: absolute;
color: #fff;
font-family: "poppins";
margin-top: 250px;
letter-spacing: 1.2px;
font-size: 20px;
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 8px;
cursor: pointer;
}
|
Output:
OutputL
Share your thoughts in the comments
Please Login to comment...