This post contains a total of 17+ CSS YouTube Logo Examples with Source Code. All these YouTube logos are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS YouTube Logo Examples
1. YouTube Logo CSS Animation
Made by Omar Dsooky. YouTube CSS Logo with animations. Hovering over the logo will display the animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Advent+Pro|Anton|Fjalla+One|Francois+One|Oswald|Ramabhadra|Tauri|Teko|Ubuntu+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Courgette|Kaushan+Script|Marck+Script|Pacifico|Sacramento" rel="stylesheet">
<style>
.container {
position: relative;
width: 300px;
margin: 2em auto;
text-align: center;
}
p {
font-family: 'Teko', sans-serif;
font-size: 100px;
z-index: 1;
color: #282828;
}
span.after,
span.before{
position: absolute;
z-index: -1;
}
.container .after {
top: 12%;
left: 43%;
width: 52%;
height: 65%;
background: #FF0000;
border-radius: 25px / 25px;
/* animation: mv 1s linear forwards; */
}
.container span.tube {
color: #FFF;
margin-left: 10px;
/* animation: textcolor 0.30s linear forwards; */
}
@keyframes textcolor {
100% {color: #282828;}}
.container span.before {
background: #FF0000;
top: 32.5%;
left: -20%;
border: 18px solid transparent;
border-left: 30px solid #FFFFFF;
z-index: 33;
color: #FFFFFF;
visibility: hidden;
/* animation: visibilityBefore 1s linear 0.85s forwards; */
}
@keyframes mv {
10%{transform: translatex(-10px);}
50%{transform: translatex(-50px);}
100% {
top: 23%;
width: 100px;
height: 65px;
border-radius: 15px / 20px;
transform: translatex(-230px);
z-index: 2;
}}
@keyframes visibilityBefore {
100% {visibility: visible;}}
.container:hover{cursor: pointer;}
.container:hover span.tube{
animation: textcolor 0.30s linear forwards;
margin-left: 0;
}
.container:hover span.before{
animation: visibilityBefore 0.4s linear .25s forwards;
}
.container:hover span.after{
animation: mv 0.25s linear forwards;
}
p.msg {
font-size: 25px;
border: 2px dashed #282828;
display: inline-block;
padding: 10px;
color: #282828;
}
*,
*:after,
*:before {
transform: translateZ(0);
}
</style>
</head>
<body translate="no" >
<div class="container">
<span class="before"></span>
<p class="you">You<span class="tube">Tube</span></p>
<span class="after"></span>
</div>
<p class="msg">Hover Logo</p>
</body>
</html>
2. YouTube logo CSS
Made by LeonimuZ. Old Youtube logo made using CSS. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald'>
<style>
/*=======================================================
A stylesheet by:
Leon Taveras (LeonimuZ) || http://be.net/lnz
Includes styles from:
YUI Pure, H5bp, Foundation, CSS-Tricks.com
& SachaGreif.com
=======================================================*/
body {
background: #E4E4E4 url(https://raw.github.com/subtlepatterns/SubtlePatterns/master/cardboard_flat.png) repeat;
}
#content {
margin: 5px auto;
width: 960px;
text-align: center;
}
h1 {
font-family: "Oswald", sans-serif;
font-size: 150px;
}
.you {
letter-spacing: -8px;
text-shadow: 0 2px 0 white;
}
.tube {
position: relative;
padding: 0 15px;
background-image: -webkit-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -moz-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -o-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -ms-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: linear-gradient(bottom, #6D0202 22%, rgb(201, 0, 0) 61%);
color: #fff;
letter-spacing: -6px;
text-shadow: 0 3px 0 #000;
border-radius: 50% / 11%;
box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.67);
}
.tube::before {
content: "Tube";
line-height: 172px;
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -4.5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
</head>
<body translate="no" >
<div id="content">
<h1>
<span class="you">You</span>
<span class="tube">Tube</span>
</h1>
</div>
</body>
</html>
3. Chrome YouTube logo
Made by Daniel Imms. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
#youtube, #youtube:before {
background-color: #E35044;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2UzNTA0NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2M2UzMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(1%, #e35044), color-stop(100%, #d63e30));
background-image: -moz-linear-gradient(left top, #e35044 1%, #d63e30 100%);
background-image: -webkit-linear-gradient(left top, #e35044 1%, #d63e30 100%);
background-image: linear-gradient(to right bottom, #e35044 1%, #d63e30 100%);
}
#youtube {
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 66px;
margin-left: -50px;
margin-top: -34px;
border-top-left-radius: 15px 50%;
border-top-right-radius: 15px 50%;
border-bottom-left-radius: 15px 50%;
border-bottom-right-radius: 15px 50%;
}
#youtube:before {
position: absolute;
content: " ";
border-top-left-radius: 50% 2px;
border-top-right-radius: 50% 2px;
border-bottom-left-radius: 50% 2px;
border-bottom-right-radius: 50% 2px;
width: 70px;
height: 70px;
left: 15px;
top: -2px;
}
#youtube:after {
position: absolute;
content: " ";
border-top: transparent 18px solid;
border-bottom: transparent 18px solid;
border-left: #F2F0E6 28px solid;
top: 50%;
left: 50%;
margin-top: -18px;
margin-left: -11px;
}
</style>
</head>
<body translate="no" >
<div id='youtube'></div>
</body>
</html>4. YouTube Go logo
Made by K D. Source
<!DOCTYPE html>
<html>
<head>
<title>Youtube Go Logo</title>
<style>
#logo{
height:140px;
width:260px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:-10px;
right:0;
}
#t1{
height:0;
width:0;
border-top:70px solid transparent;
border-bottom:70px solid transparent;
border-right:180px solid red;
}
#t2{
position:relative;
top:-140px;
left:30px;
height:0;
width:0;
border-top:30px solid transparent;
border-bottom:40px solid transparent;
border-right:150px solid red;
}
#c1{
position:relative;
top:-210px;
left:120.5px;
height:140px;
width:140px;
background-color:red;
border-radius:50%;
}
#t3{
position:relative;
top:40px;
left:55px;
height:0;
width:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-left:50px solid white;
}
</style>
</head>
<body>
<div id="logo">
<div id="t1"></div>
<div id="t2"></div>
<div id="c1">
<div id="t3"></div>
</div>
</div>
</body>
</html>5. YouTube logo [Just CSS]
Made by Gabriel Ferreira. Logo with a little bit of animation on hover. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Pathway+Gothic+One&subset=latin-ext");
.logo {
margin: 20px;
}
.logo .content {
position: relative;
}
.logo .content h1 {
margin: 0;
display: inline-block;
font-size: 10em;
font-family: "Pathway Gothic One", sans-serif;
user-select: none;
}
.logo .content h1:nth-child(2) {
height: 150px;
background-image: -webkit-linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
background-image: -moz-linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
background-image: -o-linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
background-image: -ms-linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
background-image: linear-gradient(bottom, #bf2126 22%, #e12d28 61%);
padding: 20px;
border-radius: 50%/11%;
color: white;
position: absolute;
top: 10px;
left: 200px;
color: transparent;
}
.logo .content h1:nth-child(2):hover {
animation: animation-logo 150ms infinite alternate;
}
.logo .content h1:nth-child(2):before {
content: "Tube";
color: white;
line-height: 0.9;
padding-left: 30px;
border-radius: 5%/50%;
background: inherit;
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -4.5%;
}
@keyframes animation-logo {
0% {
transform: translateX(0);
}
100% {
transform: translateX(3%);
}
}
</style>
</head>
<body translate="no" >
<div class="logo">
<div class="content">
<h1>You</h1>
<h1>Tube</h1>
</div>
</div>
</html>6. YouTube Logo with Animation
Made by David. A css YouTube logo with amazing animation, it also uses a little bit of JavaScript. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i");
*, *:before, *:after {
box-sizing: border-box;
}
html {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
background: #CC4C50;
overflow: hidden;
}
.app {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.app .youtube {
z-index: 5;
opacity: 0;
position: relative;
width: 150px;
height: 100px;
background: #FFF;
border-radius: 50%/10%;
color: #CC4C50;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.app .youtube span {
opacity: 0;
position: absolute;
font-size: 3.5em;
font-weight: 700;
z-index: 999;
}
.app .youtube .you {
position: absolute;
color: #FFF;
top: -75px;
z-index: 6;
}
.app .youtube:after {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5%/50%;
}
</style>
</head>
<body>
<div class="app">
<div class="youtube"><span class="you">You</span><span class="tube">Tube</span></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js'></script>
<script id="rendered-js" >
$(function () {
let $y = $('.youtube'),
$you = $('.you'),
$tube = $('.tube'),
$app = $('body');
let $tl = new TimelineMax({ delay: 1, repeat: 0 });
$tl.to($y, 0.1, { autoAlpha: 1 }).
add(TweenMax.fromTo($y, 0.30, { x: -50 }, { x: 50, repeat: 3, yoyo: true, ease: Sine.easeInOut, onComplete: function () {TweenMax.to(this.target, 1, { x: 0, ease: Elastic.easeOut });} })).
add(TweenMax.fromTo($tube, 0.15, { autoAlpha: 0, x: -150 }, { autoAlpha: 1, x: -25, repeat: 2, yoyo: true, ease: Sine.easeInOut, onComplete: function () {TweenMax.to(this.target, 1, { x: 0, ease: Elastic.easeOut });} }, "-=1")).
fromTo($you, 1, { autoAlpha: 0, y: 75 }, { autoAlpha: 1, y: 0, ease: Bounce.easeOut });
});
</script>
</body>
</html>7. Youtube Logo in Css
Made by Shreyas. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.logo{
margin: 200px auto;
height: 150px;
width: 220px;
background: red;
border-radius: 17% 17% 19% 17% / 31% 33% 35% 32%;
}
.it{
position: relative;
top: 50px;
left: 93px;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid white;
border-bottom: 25px solid transparent;
}
</style>
</head>
<body>
<div class="logo">
<div class="it"></div>
</div>
</body>
</html>8. YouTube Kids logo
Made by KD. Source
<!DOCTYPE html>
<html>
<head>
<title>Youtube Kids Logo</title>
<style>
#red{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
height:150px;
width:215px;
background-color:red;
border:6px solid black;
border-radius:30px;
transform:rotate(-5deg);
}
#triangle1{
position:relative;
top:25px;
left:77.5px;
height:0;
width:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:80px solid black;
}
#triangle2{
position:relative;
top:-40px;
left:-74.5px;
height:0;
width:0;
border-top:40px solid transparent;
border-bottom:40px solid transparent;
border-left:64px solid white;
}
</style>
</head>
<body>
<div id="red">
<div id="triangle1">
<div id="triangle2"></div>
</div>
</div>
</body>
</html>9. Youtube Logo Animation
Made by Parth Panchal. YouTube logo with spinning effect animations. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.youtube{
width: 170px;
height: 125px;
background-color: #FF0000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 48px;
transition: 0.2s all ease-out;
}
.youtube > .triangle{
width: 0;
height: 0;
border-style: solid;
position: absolute;
top: 25%;
left: 37%;
border-width: 30px 0px 30px 60px;
border-color: transparent transparent transparent #ffffff;
}
.youtube:hover > .triangle{
transform: rotate(-360deg);
transition: 0.5s all ease-in;
}
.youtube:hover{
-webkit-box-shadow: 30px 30px 60px -10px rgba(255,87,87,0.70);
-moz-box-shadow: 30px 30px 60px -10px rgba(255,87,87,0.70);
box-shadow: 30px 30px 60px -10px rgba(255,87,87,0.70);
border-radius: 3px;
transition: 0.5s all ease-in;
}
</style>
</head>
<body translate="no" >
<div class="youtube">
<div class="triangle"></div>
</div>
</body>
</html>10. YouTube Logo Animation Hover Effect
Made by Sk Orko. YouTube logo with sliding animation and hover effects. Source
<!DOCTYPE html>
<html lang="en-US" >
<head>
<title>YouTube Hover Effect</title>
<link rel="stylesheet" href="Style.css"
type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap"
rel="stylesheet">
<style>
*{
margin:0;
padding:0;
font-family: 'Fjalla One', sans-serif;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background-color:#fff;
}
.container {
position:relative;
width:220px;
height:60px;
text-align:center;
}
.container:hover p{
transform:translateX(-30px);
top:18%;
}
.container:hover p span {
color:black;
margin-left:-07px;
}
.container:hover .yt-avtr{
left:22%;
width:55px;
height:38px;
}
.container:hover .yt-avtr-play{
opacity:1;
}
.container p {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:28px;
transition:0.5s ease-in-out;
}
.container p span {
color:white;
transition:0.6s ease-in-out;
}
.container .yt-avtr{
position:absolute;
width:65px;
height:45px;
border-radius:10px;
background:red;
top:48%;
left:61%;
transform:translate(-50%,-50%);
mix-blend-mode:screen;
transition:0.5s ease-in-out;
}
.yt-avtr-play {
position:absolute;
top:25%;
left:45%;
transform:translate(-50%,-50%);
border-top:10px solid white;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
transform:rotate(-90deg);
opacity:0;
transition:1s;
}
</style>
</head>
<body>
<div class="container" >
<p>You <span>Tube </span></p>
<div class="yt-avtr" >
<div class="yt-avtr-play" ></div>
</div>
</div>
</body>
</html>11. Simple YouTube Logo
Made by Chandan. Logo without any animation or effects. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - YouTube Logo</title>
<style>
body {
margin: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
.youtube {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 49% / 11%;
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;
left: 40%;
top: 30%;
width: 0;
height: 0;
border-top: 28px solid transparent;
border-left: 56px solid white;
border-bottom: 28px solid transparent;
border-radius: 0px;
}
</style>
</head>
<body>
<div class="youtube">
<div class="triangle"></div>
</div>
</body>
</html>12. YouTube logo in CSS
Made by Maurice Melchers. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@font-face {
font-family: "AltGothic";
src: url("https://rawgit.com/chriswjones/jones-remote/master/JonesRemote/Resources/Alternate-Gothic-No2.ttf") format("truetype");
}
body {
height: 100vh;
background: #fff;
background: #333 radial-gradient(ellipse at center, white 0%, rgba(255, 255, 255, 0.75) 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: "AltGothic", Gothic, Sans-serif;
}
.container {
flex: 0 0 auto;
width: 500px;
height: 210px;
}
h1 {
margin: 0;
color: white;
}
.logo span {
display: inline-block;
color: #FFF;
z-index: 100;
position: relative;
}
.logo p {
margin: 0;
font-size: 50px;
letter-spacing: -0.02em;
font-size: 200px;
white-space: nowrap;
}
.logo p strong {
display: inline-block;
position: relative;
margin-left: 0.17em;
font-weight: normal;
}
.logo p strong:after, .logo p strong:before {
display: block;
background: #E32E28;
background-image: linear-gradient(to bottom, #E32E28 0%, #BE2126 100%);
content: "";
position: absolute;
top: 0;
left: 0;
}
.logo p strong:before {
border-radius: 50%/5%;
left: -0.06em;
right: -0.06em;
top: 0em;
bottom: 0em;
}
.logo p strong:after {
border-radius: 3%/50%;
top: 0.06em;
left: -0.1em;
right: -0.1em;
bottom: 0.06em;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<p contenteditable="true">You<strong><span>Tube</span></strong></p>
</div>
</div>
</body>
</html>13. YouTube logo Basic
Made by Mahi. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #d1c9c9;
overflow: hidden;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#logo-icon-container.logo {
width: 700px;
}
div.logo {
margin: auto;
width: 50%;
}
div.logo h1 {
top: 50%;
margin: 0;
font-family: sans-serif;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}
main {
display: block;
position: relative;
width: 50rem;
margin: 3vh auto;
padding: 1.5rem 0 0;
border-radius: 0.25rem;
transform: scale(0.75);
transform-origin: center 3rem;
transition: transform 0.3s;
}
</style>
</head>
<body>
<center>
<main>
<div id="logo-icon-container" class="logo">
<svg viewBox="0 0 200 60">
<!--YT Logo-->
<path fill="#FF0000" d="M63,14.87c-0.72-2.7-2.85-4.83-5.56-5.56C52.54,8,32.88,8,32.88,8S13.23,8,8.32,9.31c-2.7,0.72-4.83,2.85-5.56,5.56C1.45,19.77,1.45,30,1.45,30s0,10.23,1.31,15.13c0.72,2.7,2.85,4.83,5.56,5.56
C13.23,52,32.88,52,32.88,52s19.66,0,24.56-1.31c2.7-0.72,4.83-2.85,5.56-5.56C64.31,40.23,64.31,30,64.31,30
S64.31,19.77,63,14.87z" class="youtube-path">
</path>
<!--Youtube Logo Inner Thingie -->
<polygon fill="#FFFFFF" points="26.6,39.43 42.93,30 26.6,20.57" class="youtube-path">
</polygon>
<!--Youtube Letter 'Y'-->
<path fill="#282828" d="M77.59,36.61l-7.06-25.49h6.16l2.47,11.55c0.63,2.85,1.09,5.27,1.39,7.28h0.18
c0.21-1.44,0.67-3.85,1.39-7.24l2.56-11.6h6.16L83.7,36.61v12.23h-6.11V36.61z" class="youtube-path">
</path>
<!--Youtube Letter 'o'-->
<path fill="#282828" d="M92.69,48.03c-1.24-0.84-2.13-2.14-2.65-3.91c-0.52-1.77-0.79-4.12-0.79-7.06v-4
c0-2.97,0.3-5.35,0.9-7.15c0.6-1.8,1.54-3.11,2.81-3.93c1.27-0.82,2.94-1.24,5.01-1.24c2.04,0,3.67,0.42,4.9,1.26
c1.23,0.84,2.13,2.15,2.7,3.93c0.57,1.78,0.85,4.16,0.85,7.12v4c0,2.94-0.28,5.3-0.83,7.08c-0.55,1.78-1.45,3.09-2.7,3.91
c-1.24,0.82-2.93,1.24-5.06,1.24C95.65,49.29,93.93,48.87,92.69,48.03z M99.66,43.71c0.34-0.9,0.52-2.37,0.52-4.4v-8.59
c0-1.98-0.17-3.42-0.52-4.34c-0.34-0.91-0.95-1.37-1.82-1.37c-0.84,0-1.43,0.46-1.78,1.37c-0.34,0.91-0.52,2.36-0.52,4.34v8.59
c0,2.04,0.16,3.51,0.49,4.4c0.33,0.9,0.93,1.35,1.8,1.35C98.71,45.06,99.31,44.61,99.66,43.71z" class="youtube-path">
</path>
<!--Youtube Letter 'u'-->
<path fill="#282828" d="M126.45,21.28v27.55h-4.85l-0.54-3.37h-0.13c-1.32,2.55-3.3,3.82-5.93,3.82c-1.83,0-3.18-0.6-4.05-1.8
c-0.87-1.2-1.3-3.07-1.3-5.62V21.28h6.2v20.23c0,1.23,0.13,2.11,0.4,2.63c0.27,0.52,0.72,0.79,1.35,0.79
c0.54,0,1.06-0.16,1.55-0.49c0.49-0.33,0.86-0.75,1.1-1.26V21.28H126.45z" class="youtube-path">
</path>
<!--Youtube Letter 'T'-->
<path fill="#282828" d="M143.31,16.11h-6.16v32.72h-6.07V16.11h-6.16v-4.99h18.38V16.11z" class="youtube-path">
</path>
<!--Youtube Letter 'u'-->
<path fill="#282828" d="M158.27,21.28v27.55h-4.85l-0.54-3.37h-0.13c-1.32,2.55-3.3,3.82-5.93,3.82c-1.83,0-3.18-0.6-4.05-1.8
c-0.87-1.2-1.3-3.07-1.3-5.62V21.28h6.2v20.23c0,1.23,0.13,2.11,0.4,2.63c0.27,0.52,0.72,0.79,1.35,0.79
c0.54,0,1.06-0.16,1.55-0.49c0.49-0.33,0.86-0.75,1.1-1.26V21.28H158.27z" class="youtube-path">
</path>
<!--Youtube Letter 'b'-->
<path fill="#282828" d="M178.8,25.69c-0.38-1.74-0.98-3-1.82-3.78c-0.84-0.78-1.99-1.17-3.46-1.17c-1.14,0-2.2,0.32-3.19,0.97
c-0.99,0.64-1.75,1.49-2.29,2.54h-0.05l0-14.52h-5.98v39.11h5.12l0.63-2.61h0.13c0.48,0.93,1.2,1.66,2.16,2.2
c0.96,0.54,2.02,0.81,3.19,0.81c2.1,0,3.64-0.97,4.63-2.9c0.99-1.93,1.48-4.95,1.48-9.06v-4.36
C179.36,29.84,179.17,27.43,178.8,25.69z M173.11,36.93c0,2.01-0.08,3.58-0.25,4.72c-0.16,1.14-0.44,1.95-0.83,2.43
c-0.39,0.48-0.91,0.72-1.57,0.72c-0.51,0-0.98-0.12-1.42-0.36c-0.43-0.24-0.79-0.6-1.06-1.08V27.71
c0.21-0.75,0.57-1.36,1.08-1.84c0.51-0.48,1.06-0.72,1.66-0.72c0.63,0,1.12,0.25,1.46,0.74c0.34,0.49,0.58,1.33,0.72,2.49
c0.13,1.17,0.2,2.83,0.2,4.99V36.93z" class="youtube-path">
</path>
<!--Youtube Letter 'e'-->
<path fill="#282828" d="M188.16,37.13v1.39c0,1.77,0.05,3.09,0.16,3.98c0.1,0.88,0.32,1.53,0.65,1.93
c0.33,0.4,0.84,0.61,1.53,0.61c0.93,0,1.57-0.36,1.91-1.08c0.34-0.72,0.53-1.92,0.56-3.6l5.35,0.31
c0.03,0.24,0.04,0.57,0.04,0.99c0,2.55-0.7,4.45-2.09,5.71c-1.39,1.26-3.36,1.89-5.91,1.89c-3.06,0-5.2-0.96-6.43-2.88
c-1.23-1.92-1.84-4.88-1.84-8.9v-4.81c0-4.14,0.64-7.15,1.91-9.06c1.27-1.9,3.45-2.85,6.54-2.85c2.13,0,3.76,0.39,4.9,1.17
c1.14,0.78,1.94,1.99,2.41,3.64c0.46,1.65,0.7,3.93,0.7,6.83v4.72H188.16z M188.95,25.53c-0.31,0.39-0.52,1.03-0.63,1.91
c-0.11,0.88-0.16,2.23-0.16,4.02v1.98h4.54v-1.98c0-1.77-0.06-3.11-0.18-4.02c-0.12-0.91-0.34-1.56-0.65-1.93
c-0.31-0.37-0.8-0.56-1.46-0.56C189.75,24.94,189.26,25.14,188.95,25.53z" class="youtube-path">
</path>
</svg>
</body>
</html>14. Youtube Studio Logo
Made by KD. YouTube Studio logo without any animation. Source
<!DOCTYPE html>
<html>
<head>
<title>Youtube Studio Logo</title>
<style>
#logo{
height:250px;
width:250px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
#spoke1,#spoke2,#spoke3{
position:relative;
left:90px;
height:250px;
width:70px;
background-color:red;
border-radius:5px;
}
#spoke2{
top:-250px;
transform:rotate(60deg);
}
#spoke3{
top:-500px;
transform:rotate(-60deg);
}
#circle{
position:relative;
top:-725px;
left:25px;
height:200px;
width:200px;
background-color:red;
border-radius:50%;
}
#triangle{
position:relative;
top:55px;
left:75px;
height:0;
width:0;
border-top:45px solid transparent;
border-bottom:45px solid transparent;
border-left:75px solid white;
}
</style>
</head>
<body>
<div id="logo">
<div id="spoke1"></div>
<div id="spoke2"></div>
<div id="spoke3"></div>
<div id="circle">
<div id="triangle"></div>
</div>
</div>
</body>
</html>15. YouTube icon Pure CSS
Made by Shounak. Simple CSS YouTube logo without any effects. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #ffcdd2;
}
.container {
position: absolute;
height: 200px;
width: 250px;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container .yt-icon {
background: #ff1f22;
height: 200px;
width: 250px;
border-radius: 90%/10%;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
position: relative;
}
.container .yt-icon::before {
content: "";
position: absolute;
height: 180px;
width: 278px;
top: 10px;
left: -14px;
background: inherit;
border-radius: 10%/90%;
box-shadow: 30px 0 29px -30px rgba(0, 0, 0, 0.3), -30px 0 29px -30px rgba(0, 0, 0, 0.3);
}
.container .yt-icon .play-btn {
position: absolute;
left: 90px;
top: 50px;
width: 0;
border-left: 81.6px solid #fff;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
transform: scale(0.8);
}
</style>
</head>
<body>
<div class="container">
<div class="yt-icon">
<div class="play-btn"></div>
</div>
</div>
</body>
</html>16. YouTube Logo
Made by David Salazar. ( Source )
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #202020;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.all {
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif;
}
.logo {
height: 100px;
background-color: #ff0000;
width: 150px;
border-radius: 10% / 30%;
display: flex;
justify-content: center;
align-items: center;
}
.logo span {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 40px;
border-color: transparent transparent transparent #ffffff;
}
.letras {
margin-left: 15px;
color: #ffffff;
font-size: 90px;
letter-spacing: -1px;
}
</style>
</head>
<body>
<div class="all">
<div class="logo">
<span></span>
</div>
<span class="letras">YouTube</span>
</div>
</body>
</html>17. Old YouTube logo
Made by Phil Thompson. Old YouTube logo using css3. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1 {
margin: 0 auto;
font-family: arial;
font-size: 10em;
}
h1 span {
/*background-color: rgb(255,0,0);*/
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF0000', endColorstr='#FF3C0000');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNjMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #3c0000));
background-image: -moz-linear-gradient(top, #ff0000 0%, #3c0000 100%);
background-image: -webkit-linear-gradient(top, #ff0000 0%, #3c0000 100%);
background-image: linear-gradient(to bottom, #ff0000 0%, #3c0000 100%);
padding: 5px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
color: white;
}
</style>
</head>
<body>
<h1>You<span>Tube</span></h1>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>18. Basic YouTube Logo
Made by zouraiz. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - YouTube Logo</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:[email protected];200;300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Raleway', Arial, sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background:#fff;
min-height: 100vh;
}
.youtube{
height: 150px;
width: 200px;
background: red;
margin: 100px auto;
border-radius: 50% / 10%;
position: relative;
}
.youtube::before{
content: "";
position: absolute;
top: 10%;
bottom: 10%;
left: -5%;
right: -5%;
background: red;
border-radius: 5% / 50%;
}
.youtube::after{
content: "";
position: absolute;
height: 2px;
width: 2px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 45px solid #ffff;
top: 45px;
right: 65px;
}
</style>
</head>
<body>
<div class="youtube"></div>
</body>
</html>