Social Icons with Animation

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>
 Webleb
 </title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
 integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
 crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link rel="stylesheet" href="/css/styles.css" />
</head>
<body style="display: flex; justify-content:center ; align-items: center;height: 100vh;overflow: hidden;">
	<ul>
		<li>
		 <a class="facebook" href="https://www.web-leb.com/login">
			
			
			
			
			
		 </a>
		</li>
		<li>
		 <a class="twitter" href="https://www.web-leb.com/login">
			
			
			
			
			
		 </a>
		</li>
		<li>
		 <a class=" instagram" href="https://www.web-leb.com/login">
			
			
			
			
			
		 </a>
		</li>
	 </ul>
</body>
</html>

CSS

body {
  margin:0;
  padding:0;
  background: #abbaab;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #ffffff, #abbaab);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #ffffff, #abbaab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
}
ul {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}
ul li {
  list-style:none;
}
ul li a {
  display:block;
  position:relative;
  width:100px;
  height:100px;
  line-height:100px;
  font-size:40px;
  text-align:center;
  text-decoration:none;
  color:#404040;
  margin: 0 30px;
  transition:.5s;
}
ul li a span {
  position:absolute;
  transition: transform .5s;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3){
  width:100%;
  height:3px;
  background:#404040;
}
ul li a span:nth-child(1) {
  top:0;
  left:0;
  transform-origin: right;
}
ul li a:hover span:nth-child(1) {
  transform: scaleX(0);
  transform-origin: left;
  transition:transform .5s;
}

ul li a span:nth-child(3) {
  bottom:0;
  left:0;
  transform-origin: left;
}
ul li a:hover span:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;
  transition:transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
  width:3px;
  height:100%;
  background:#404040;
}
ul li a span:nth-child(2) {
  top:0;
  left:0;
  transform:scale(0);
  transform-origin: bottom;
}
ul li a:hover span:nth-child(2) {
  transform: scale(1);
  transform-origin: top;
  transition:transform .5s;
}
ul li a span:nth-child(4) {
  top:0;
  right:0;
  transform:scale(0);
  transform-origin: top;
}
ul li a:hover span:nth-child(4) {
  transform: scale(1);
  transform-origin: bottom;
  transition:transform .5s;
}

.facebook:hover {
  color: #3b5998;
}
.facebook:hover span { 
  background: #3b5998;
}
.twitter:hover {
  color: #1da1f2;
}
.twitter:hover span { 
  background: #1da1f2;
}
.instagram:hover {
  color: #c32aa3;
}
.instagram:hover span { 
  background: #c32aa3;
}
.google:hover {
  color: #dd4b39;
}
.google:hover span { 
  background: #dd4b39;
}
ul li a .twitter {
  color: #1da1f2;
}
ul li a:hover:nth-child(3) {
  color: #c32aa3;
}
ul li a:hover:nth-child(4) {
  color: #dd4b39;
}

Social Icons with Animation

Recommended

HTML Animation Container Structure

animation text

HTML Portfolio Website with Side Menu

HTML

CSS

JS

Recommended

HTML Animation Container Structure

animation text

HTML Portfolio Website with Side Menu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS