Tarjeta Social en CSS

6,232 DeveloperUI

Abrir en el editor Publica tu código

Recomendado

21 March 2026

Ramo de flores animado con CSS

16 October 2025

Fragmento HTML de cargador de cilindros CSS

21 October 2024

Efectos del menú desplegable

HTML

<!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;
  }