CSS Drop cards Social buttons

Developer
Oloman
Size
3,502 Kb
Views
58,696
  1. CSS Drop cards Social buttons Previews
  2. CSS Drop cards Social buttons HTML Codes
  3. CSS Drop cards Social buttons CSS Codes

How do I make an css drop cards social buttons?

A dropping cards with links to your social networks. What is a css drop cards social buttons? How do you make a css drop cards social buttons? This script and codes were developed by Oloman on 22 August 2022, Monday.

CSS Drop cards Social buttons Previews
IQ Test

CSS Drop cards Social buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Drop cards Social buttons</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Lobster);
body { margin: 10px auto; padding: 0; background: #ccc;
}
/* Reset */
.cartera, .tarjeta, .tarjeta a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* Contenedor general */
.cartera { position: relative; width: 100%; max-width: 500px; margin: 40px auto 0; text-align: center; line-height: 56px; font-size: 14px; font-family: sans-serif;
}
/* Cada tarjeta */
.tarjeta { position: relative; width: 100%; height: 30px; margin: 0 auto; padding: 0; text-align: left; border-bottom: 3px groove #eee;
}
/* Estado normal */
.tarjeta a { position: relative; display: block; top: -6px; left: 50%; width: 96%; margin-left: -48%; padding: 0 0 0 16px; line-height: 32px; font-weight: normal; border-radius: 16px 16px 0 0; text-decoration: none; box-shadow: 0 -2px 2px rgba(0,0,0,.1), 0 0 20px rgba(0,0,0,.2) inset; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear;
}
/* Elevación de las tarjetas */
.tarjeta a:hover { line-height: 52px; top: -26px; text-decoration: none;
}
/* Logos */
.tarjeta a:before { display: inline-block; *display: inline; zoom: 1; width: 20px; margin-right: 10px; text-align: center; font-family: Fontawesome; font-size: 18px;
}
/* Sombra parte inferior */
.tarjeta a:after { content: ""; position: absolute; bottom: 0; left: 50%; width: 102%; margin-left: -51%; height: 2px; display: block; border-radius: 80px 80px 0 0 ; box-shadow: 0 -2px 6px #666; z-index: -1;
}
/* Colores Twitter */
.tarjeta.ttwitter a { color: #ddd; background-color: #01AFEC; border-top: 2px solid #43CFFE;
}
/* Colores Google+ */
.tarjeta.tgoogle a { color: #333; background-color: #DB4A37; border-top: 2px solid #E88C80;
}
/* Colores Facebook */
.tarjeta.tfacebook a { color: #ccc; background: #3B559F; border-top: 2px solid #6B83C9;
}
/* Colores Linkedin */
.tarjeta.tlinkedin a { color: #333; background: #007BB6; border-top: 2px solid #83A9CB;
}
/* Colores Pinterest */
.tarjeta.tpinterest a { color: #ccc; background: #CB2027; border-top: 2px solid #E88C80;
}
/* Colores Instagram */
.tarjeta.tinstagram a { color: #ccc; background: #42719D; border-top: 2px solid #83A9CB;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="cartera"> <span style="font-family: Lobster, italic;font-size: 40px;">En la Red</span> <div class="tarjeta tfacebook"> <a class="fa-facebook" href="ENLACE_CTA_FACEBOOK">Facebook</a> </div> <div class="tarjeta tgoogle"> <a class="fa-google-plus" href="ENLACE_CTA_GOOGLE+">Google+</a> </div> <div class="tarjeta ttwitter"> <a class="fa-twitter" href="ENLACE_CTA_TWITTER">Twitter</a> </div> <div class="tarjeta tlinkedin"> <a class="fa-linkedin" href="ENLACE_CTA_LINKEDIN">Linkedin</a> </div> <div class="tarjeta tpinterest"> <a class="fa-pinterest" href="ENLACE_CTA_PINTEREST">Pinterest</a> </div> <div class="tarjeta tinstagram"> <a class="fa-instagram" href="ENLACE_CTA_INSTAGRAM">Instagram</a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS Drop cards Social buttons - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lobster);
body { margin: 10px auto; padding: 0; background: #ccc;
}
/* Reset */
.cartera, .tarjeta, .tarjeta a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* Contenedor general */
.cartera { position: relative; width: 100%; max-width: 500px; margin: 40px auto 0; text-align: center; line-height: 56px; font-size: 14px; font-family: sans-serif;
}
/* Cada tarjeta */
.tarjeta { position: relative; width: 100%; height: 30px; margin: 0 auto; padding: 0; text-align: left; border-bottom: 3px groove #eee;
}
/* Estado normal */
.tarjeta a { position: relative; display: block; top: -6px; left: 50%; width: 96%; margin-left: -48%; padding: 0 0 0 16px; line-height: 32px; font-weight: normal; border-radius: 16px 16px 0 0; text-decoration: none; box-shadow: 0 -2px 2px rgba(0,0,0,.1), 0 0 20px rgba(0,0,0,.2) inset; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear;
}
/* Elevación de las tarjetas */
.tarjeta a:hover { line-height: 52px; top: -26px; text-decoration: none;
}
/* Logos */
.tarjeta a:before { display: inline-block; *display: inline; zoom: 1; width: 20px; margin-right: 10px; text-align: center; font-family: Fontawesome; font-size: 18px;
}
/* Sombra parte inferior */
.tarjeta a:after { content: ""; position: absolute; bottom: 0; left: 50%; width: 102%; margin-left: -51%; height: 2px; display: block; border-radius: 80px 80px 0 0 ; box-shadow: 0 -2px 6px #666; z-index: -1;
}
/* Colores Twitter */
.tarjeta.ttwitter a { color: #ddd; background-color: #01AFEC; border-top: 2px solid #43CFFE;
}
/* Colores Google+ */
.tarjeta.tgoogle a { color: #333; background-color: #DB4A37; border-top: 2px solid #E88C80;
}
/* Colores Facebook */
.tarjeta.tfacebook a { color: #ccc; background: #3B559F; border-top: 2px solid #6B83C9;
}
/* Colores Linkedin */
.tarjeta.tlinkedin a { color: #333; background: #007BB6; border-top: 2px solid #83A9CB;
}
/* Colores Pinterest */
.tarjeta.tpinterest a { color: #ccc; background: #CB2027; border-top: 2px solid #E88C80;
}
/* Colores Instagram */
.tarjeta.tinstagram a { color: #ccc; background: #42719D; border-top: 2px solid #83A9CB;
}
CSS Drop cards Social buttons - Script Codes
CSS Drop cards Social buttons - Script Codes
Home Page Home
Developer Oloman
Username oloman
Uploaded August 22, 2022
Rating 3
Size 3,502 Kb
Views 58,696
Do you need developer help for CSS Drop cards Social buttons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oloman (oloman) Script Codes
Name
Testing. Backup feed main data
Responsive video loader
CSS responsive football pitch
CSS Responsive accordion social buttons
Book 3D
CSS Spoiler
CSS - Circular drop menu
Before-After TwentyTwenty jQuery plugin
CSS. Hover lines effects
Scotch tape css effect
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!