Tarjeta Social en CSS

Abrir en el editor Publica tu código

Recomendado

13 April 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Social Menu</title>
  <link rel="stylesheet" href="/css/styles.css">
  <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" />
</head>
<body>
  <div class="main">
    <div class="card">
      <span class="instagram"><i class="fab fa-instagram"></i></span>
    </div>
    <div class="card">
      <span class="twitter"><i class="fab fa-twitter"></i></span>
    </div>
    <div class="card">
      <span class="tiktok"><i class="fab fa-tiktok"></i></span>
    </div>
    <div class="card">
      <span class="facebook"><i class="fab fa-facebook"></i></span>
    </div>
    <div class="card">

</div>
    <div class="card">
      <span class="discord"><i class="fab fa-discord"></i></span>
    </div>
    <div class="card">
      <span class="github"><i class="fab fa-github"></i></span>
    </div>
    <div class="card">
      <span class="telegram"><i class="fab fa-telegram"></i></span>
    </div>
    <div class="card">
      <span class="youtube"><i class="fab fa-youtube"></i></span>
    </div>
    <p class="text">Our Socials</p>
    <div class="main_back"></div>
  </div>
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Poppins';
}
.main_back {
	position: absolute;
	border-radius: 10px;
	transform: rotate(90deg);
	width: 11em;
	height: 11em;
	background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
	z-index: -2;
	box-shadow: inset 0px 0px 180px 5px #ffffff;
  }
  
  .main {
	display: flex;
	flex-wrap: wrap;
	width: 14em;
	align-items: center;
	justify-content: center;
	z-index: -1;
  }
  
  .card {
	width: 60px;
	height: 60px;
	border-top-left-radius: 10px;
	background: lightgrey;
	transition: .4s ease-in-out, .2s background-color ease-in-out, .2s background-image ease-in-out;
	background: rgba(255, 255, 255, 0.596);
	backdrop-filter: blur(5px);
	border: 1px solid transparent;
	-webkit-backdrop-filter: blur(5px);
	display: flex;
	align-items: center;
	justify-content: center;

}
  
  .card .instagram {
	opacity: 0;
	transition: .2s ease-in-out;
  }
  
  .card:nth-child(2) .twitter {
	opacity: 0;
	transition: .2s ease-in-out;
  }
  
  .card:nth-child(3) {
	border-top-right-radius: 10px;
	border-top-left-radius: 0px;
  }
  
  .card:nth-child(3) .tiktok {
	opacity: 0;
	transition: .2s ease-in-out;
  }
  
  .card:nth-child(4) {
	border-radius: 0px;
  }
  
  .card:nth-child(4) .facebook {
	opacity: 0;
	transition: .2s ease-in-out;
  }
  
  .card:nth-child(5) {
	border-radius: 0px;
  }
  
  .card:nth-child(6) {
	border-radius: 0px;
  }
  
  .card:nth-child(6) .discord {
	opacity: 0;
	transition: .2s ease-in-out;
	fill: #8c9eff;
  }
  .card:nth-child(7) {
	border-bottom-left-radius: 10px;
	border-top-left-radius: 0px;
  }
  
  .card:nth-child(7) .github {
	opacity: 0;
	transition: .2s ease-in-out;
	fill: black;
  }
  
  .card:nth-child(8) {
	border-radius: 0px;
  }
  
  .card:nth-child(8) .telegram {
	opacity: 0;
	transition: .2s ease-in-out;
	fill: #29b6f6;
  }
  
  .card:nth-child(9) {
	border-bottom-right-radius: 10px;
	border-top-left-radius: 0px;
  }
  
  .card:nth-child(9) .youtube {
	opacity: 0;
	transition: .2s ease-in-out;
  }
  
  .main:hover {
	width: 14em;
	cursor: pointer;
  }
  
  .main:hover .main_back {
	opacity: 0;
  }
  
  .main:hover .card {
	margin: .2em;
	border-radius: 10px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.334);
	background: rgba(255, 255, 255, 0.2);
  }
  
  .main:hover .card:nth-child(5) {
	border: transparent;
  }
  
  .main:hover .text {
	opacity: 0;
	z-index: -3;
  }

.main:hover .youtube, 
  .main:hover .telegram,
  .main:hover .github,
  .main:hover .tiktok,
  .main:hover .instagram,
  .main:hover .discord,
  .main:hover .facebook,
  .main:hover .twitter{
	opacity: 1;
  }
  
  .card:nth-child(1):hover {
	background-color: #cc39a4;
  }
  .card:nth-child(2):hover {
	background-color: #03A9F4;
  }
  
  
  .card:nth-child(3):hover {
	background-color: #ffb5d2;
  }
  
  .card:nth-child(4):hover {
	background-color: #7baaf0;
  }

.card:nth-child(5):hover {
	animation: backgroundIMG .1s;
	animation-fill-mode: forwards;
  }
  
  
  @keyframes backgroundIMG {
	100% {
	  background-image: linear-gradient(#2096a3,#088981,#00DDEB);
	}
  }
  
  .card:nth-child(6):hover {
	background-color: #8c9eff;
  }
  .card:nth-child(7):hover {
	background-color: rgb(153, 131, 131);
  }
  .card:nth-child(8):hover {
	background-color: #6fc5ed;
  }
  
  
  .card:nth-child(9):hover {
	background-color: rgb(255,69,0);
  }
  
  .card:nth-child(9) .youtube > g circle {
	fill: rgb(255,69,0);
  }
  
  .card:nth-child(9) .youtube > g path {
	fill: white;
  }
  
  .text {
	position: absolute;
	font-size: 0.7em;
	transition: .4s ease-in-out;
	color: black;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.33em;
	z-index: 3;
  }

Tarjeta Social en CSS

Recomendado

Tarjeta CSS sencilla

Ondas con CSS puro

Nave alienígena

HTML

CSS

JS

Recomendado

Tarjeta CSS sencilla

Ondas con CSS puro

Nave alienígena

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS