Tarjeta Social en CSS

5666 DeveloperUI

Abrir en el editor Publica tu código

Recomendado

29 September 2025

Animación de carga CSS con imagen de fondo

13 November 2024

Efecto de marco para imágenes usando CSS puro

15 March 2024

Entrada CSS animada

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

Recomendado

Animación de carga CSS con imagen de fondo

Efecto de marco para imágenes usando CSS puro

Entrada CSS animada

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS