3D Buttons Social Media Icons & About Social Media Details

Maa Blogger Program

About Facebook

Facebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. It was founded by Mark Zuckerberg, along with his fellow roommates and students at Harvard College. It also has acquired Instagram, WhatsApp, Oculus, Giphy and Mapillary, and has a 9.9% stake in Jio Platforms. ("4 Feb 2004").

About Instagram

Instagram (commonly abbreviated to IG or Insta) is an American photo and video sharing social networking service created by Kevin Systrom and Mike Krieger. In April 2012, Facebook acquired the service for approximately US$1 billion in cash and stock. As of January 2019, the Stories feature is used by 500 million users daily. ("6 October 2010").

About Twitter

Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets". Audio and video tweets remain limited to 140 seconds for most accounts.Twitter was created by Jack Dorsey, Noah Glass, Biz Stone, and Evan Williams in March 2006 and launched in July of that year. Twitter had more than 330 million monthly active users. ("21 March 2006").

About YouTube

YouTube is an online video sharing and social media platform owned by Google. Around the world, its users watch more than one billion hours of videos each day.Launched by Steve Chen, Chad Hurley, and Jawed Karim during 2005. Active Users 2 billion (October 2020). ("14 February 2005").

About WhatsApp

WhatsApp, Original author(s) Brian Acton, Jan Koum. The client application was created by WhatsApp Inc. of Mountain View, California, which was acquired by Facebook in February 2014 for approximately US$19.3 billion. It became the world's most popular messaging application by 2015,and has over 2 billion users worldwide as of February 2020. ("January 2009").

About Telegram

Telegram, (Original author(s)-Nikolai Durov Pavel Durov) is a freeware, cross-platform, cloud-based instant messaging (IM) software. The service also provides end-to-end encrypted video calling. It was launched for iOS on 14 August 2013 and Android in October 2013. Telegram surpassed 500 million monthly active users. It was the most downloaded app worldwide in January 2021. ("14 August 2013").

Source Code Of Program

HTML Code

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title>3D Social Media</title>

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

</head>

<body>

<div class="buttons">

<div class="row">

<button class="facebook">

<span><i class="fab fa-facebook-f"></i></span>

Facebook</button>

<div class="text">

<p>Facebook, Inc., is an American multinational technology conglomerate based in Menlo Park, California. It was founded by Mark Zuckerberg, along with his fellow roommates and students at Harvard College. It also has acquired Instagram, WhatsApp, Oculus, Giphy and Mapillary, and has a 9.9% stake in Jio Platforms. <b>("4 Feb 2004")</b>.</p>

</div>

<button class="instagram">

<span><i class="fab fa-instagram"></i></span>

Instagram</button>

<div class="text">

<p>Instagram (commonly abbreviated to IG or Insta) is an American photo and video sharing social networking service created by Kevin Systrom and Mike Krieger. In April 2012, Facebook acquired the service for approximately US$1 billion in cash and stock. As of January 2019, the Stories feature is used by 500 million users daily. <b>("6 October 2010")</b>.</p>

</div>

<button class="twitter">

<span><i class="fab fa-twitter"></i></span>

Twitter</button>

<div class="text">

<p>Twitter is an American microblogging and social networking service on which users post and interact with messages known as "tweets". Audio and video tweets remain limited to 140 seconds for most accounts.Twitter was created by Jack Dorsey, Noah Glass, Biz Stone, and Evan Williams in March 2006 and launched in July of that year. Twitter had more than 330 million monthly active users. <b>("21 March 2006")</b>.</p>

</div>

<div class="row">

<button class="youtube">

<span><i class="fab fa-youtube"></i></span>

YouTube</button>

<div class="text">

<p>YouTube is an online video sharing and social media platform owned by Google. Around the world, its users watch more than one billion hours of videos each day.Launched by Steve Chen, Chad Hurley, and Jawed Karim during 2005. Active Users 2 billion (October 2020). <b>("14 February 2005")</b>.</p>

</div>

<button class="whatsapp">

<span><i class="fab fa-whatsapp"></i></span>

WhatsApp</button>

<div class="text">

<p>WhatsApp, Original author(s) Brian Acton, Jan Koum. The client application was created by WhatsApp Inc. of Mountain View, California, which was acquired by Facebook in February 2014 for approximately US$19.3 billion. It became the world's most popular messaging application by 2015,and has over 2 billion users worldwide as of February 2020. <b>("January 2009")</b>.</p>

</div>

<button class="telegram">

<span><i class="fab fa-telegram"></i></span>

Telegram</button>

<div class="text">

<p>Telegram, (Original author(s)-Nikolai Durov Pavel Durov) is a freeware, cross-platform, cloud-based instant messaging (IM) software. The service also provides end-to-end encrypted video calling. It was launched for iOS on 14 August 2013 and Android in October 2013. Telegram surpassed 500 million monthly active users. It was the most downloaded app worldwide in January 2021. <b>("14 August 2013")</b>.</p>

</div>

</body>

</html>

CSS Code

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'hyper';

}

html,body{

display: grid;

height: 100%;

place-items: center;

background: url(https://images.unsplash.com/photo-1428908728789-d2de25dbd4e2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80);

}

.buttons{

display: flex;

width: 900px;

height: 400px;

align-items: center;

justify-content: space-around;

}

.buttons .row{

display: block;

margin-left: 30px;

}

.buttons .row button{

position: relative;

display: block;

height: 75px;

width: 250px;

margin: 8px 0;

color: #fff;

font-size: 45px;

font-weight: 500;

text-shadow: 0px -1px 0px rgba(0,0,0,0.4);

cursor: pointer;

border: none;

outline: none;

border-radius: 0 5px 5px 0;

transition: all 15s ease-out;

}

.row button:active{

top: 20px;

}

.row button.facebook,

.row button.facebook span{

background: #1778F2;

border-left: 2px solid #2E4476;

box-shadow: 0px 5px 0px 0px #2E4476;

}

.row button.facebook:active{

box-shadow: 0px 2px 0px 0px #2E4476;

}

.row button.twitter,

.row button.twitter span{

background: #1DA1F2;

border-left: 1px solid #269BD0;

box-shadow: 0px 5px 0px 0px #269BD0;

}

.row button.twitter:active{

box-shadow: 0px 2px 0px 0px #269BD0;

}

.row button.instagram,

.row button.instagram span{

background: linear-gradient(#405DE6,#5B51D8,#833AB4,#C13584,#E1306C,#FD1D1D,#F56040,#F77737,#FCAF45,#FFDC80);

border-left: 1px solid #c91d56;

box-shadow: 0px 5px 0px 0px #c91d56;

}

.row button.instagram:active{

box-shadow: 0px 2px 0px 0px #c91d56;

}

.row button.youtube,

.row button.youtube span{

background: #FF0000;

border-left: 1px solid #C02B21;

box-shadow: 0px 5px 0px 0px #C02B21;

}

.row button.youtube:active{

box-shadow: 0px 2px 0px 0px #C02B21;

}

.row button.whatsapp,

.row button.whatsapp span{

background: linear-gradient(#25D366,#25D366);

border-left: 1px solid #128C7E;

box-shadow: 0px 5px 0px 0px #128C7E;

}

.row button.whatsapp:active{

box-shadow: 0px 2px 0px 0px #128C7E;

}

.row button.telegram,

.row button.telegram span{

background: linear-gradient(#33A0D6,#33A0D6);

border-left: 1px solid #1A94D1;

box-shadow: 0px 5px 0px 0px #1A94D1;

}

.row button.telegram:active{

box-shadow: 0px 2px 0px 0px #1A94D1;

}

.row button span{

position: absolute;

height: 55px;

width: 60px;

top: 0;

left: -60px;

line-height: 55px;

font-size: 40px;

display: block;

font-weight: normal;

border-radius: 5px 0 0 5px;

}

.row button:active span{

top: -3px;

}

.row button.facebook span{

border-right: 1px solid #2E4476;

}

.row button.twitter span{

border-right: 1px solid #269BD0;

}

.row button.instagram span{

border-right: 1px solid #c91d56;

}

.row button.youtube span{

border-right: 1px solid #C02B21;

}

.row button.whatsapp span{

border-right: 1px solid #128C7E;

}

.row button.telegram span{

border-right: 1px solid #1A94D1;

}

.row button.facebook:active span{

box-shadow: 0px 5px 0px 0px #2E4476,