Create Youtube social icon using HTML and CSS

This Youtube Icon is an enjoyment idea. The developer has provided a basic and simple icon model to give an alluring look. To add extravagance to the structure, you need to manually work on the design. If you are familiar with Youtube, you will not find this icon new. On a white background, the Youtube icon is present.

HTML Code:

<div class="youtube">
  <div class="triangle"></div>
</div>
<p>YOUTUBE</p>

CSS Code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #f1f5f7;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 10px
}
.youtube {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
.youtube::before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

.triangle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 50px solid white;
  border-bottom: 25px solid transparent;
}
p{
  font-family: sans-serif;
  font-size: 8rem;
  font-weight: 700;
  margin-left: 10px;
}

RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply