Assalamu'alaikum wr wb,
berikut ini saya akan share Cara buat social share di kanan bawah card,
berikut ini syntaxnya.
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
margin-top: 3em;
}
ul,
ol {
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style-type: none;
}
.inline-list li {
display: inline-block;
margin: 0 0.25em 0 0.25em;
}
/*---------------------------
THIS STUFF IS RELEVANT
---------------------------*/
.profile-block {
margin: 0 auto 4em auto;
max-width: 295px;
position: relative;
padding: 1em 1em 2.5em 1em;
text-align: center;
border: 1px solid #eee;
border-top: 4px solid #37C0FF;
border-radius: 5px 5px 5px 5px;
}
.profile-img {
border: 1px solid #ddd;
width: 100px;
border-radius: 50% 50%;
}
.profile-bio,
.profile-more {
font-size: 14px;
}
.profile-more {
position: absolute;
bottom: 0;
right: 0;
margin: 0 0 0 0;
border-radius: 3px 0 5px 0;
color: #ffffff;
}
.profile-social {
background-color: #ffffff;
border: 1px solid #eee;
font-size: 0;
border-radius: 5px 5px 5px 5px;
position: absolute;
bottom: -52px;
left: 0;
right: 0;
}
.profile-social li {
margin: 0 0 0 0;
font-size: 20px;
padding: 0 1em 0 1em;
border-left: 1px solid #eee;
}
.profile-social li:first-of-type {
border-left: none;
}
.social-visible .profile-more .fa-plus,
.profile-more .fa-minus {
display: none;
}
.social-visible .profile-more .fa-minus {
display: block;
}
.profile-social,
.fa.fa-play {
opacity: 0;
transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
}
.social-visible .profile-social,
.social-visible .fa.fa-play {
opacity: 1;
}
.fa.fa-play {
position: absolute;
bottom: -20px;
right: 15px;
color: #ddd;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.social-visible.fa.fa-play {
opacity: 1;
}
.fa.fa-twitter { color:#55acee; }
.fa.fa-github { color:#333333; }
.fa.fa-facebook { color:#3b5998; }
.fa.fa-google-plus { color:#dd4b39; }
.fa.fa-dribbble { color:#ea4c89; }
/* --------------------------------
YOU CAN IGNORE STUFF BELOW HERE,
JUST MAKING IT LOOK A LITTLE NICER
-------------------------------- */
/* ------------------------
2. Grid
https://css-tricks.com/dont-overthink-it-grids/
------------------------ */
.row {
width:100%;
max-width:80em;
margin:0 auto 0 auto;
}
.row:after {
content:"";
display:table;
clear:both;
}
.row .row {
margin-left: -0.75em;
margin-right: -0.75em;
}
[class*='col-'] {
float:left;
padding:0 0.75em 0 0.75em;
}
.col-1-2 { width:50%; }
.col-2-2 { width:100%; }
.col-1-3 { width:33.33%; }
.col-2-3 { width:66.66%; }
.col-3-3 { width:100%; }
.col-1-4 { width:25%; }
.col-2-4 { width:50%; }
.col-3-4 { width:75%; }
.col-4-4 { width:100%; }
.col-1-5 { width:20%; }
.col-2-5 { width:40%; }
.col-3-5 { width:60%; }
.col-4-5 { width:80%; }
.col-5-5 { width:100%; }
@media only screen and (min-width:37.5em){
.m-col-1-2 { width:50%; }
.m-col-2-2 { width:100%; }
.m-col-1-3 { width:33.33%; }
.m-col-2-3 { width:66.66%; }
.m-col-3-3 { width:100%; }
.m-col-1-4 { width:25%; }
.m-col-2-4 { width:50%; }
.m-col-3-4 { width:75%; }
.m-col-4-4 { width:100%; }
.m-col-1-5 { width:20%; }
.m-col-2-5 { width:40%; }
.m-col-3-5 { width:60%; }
.m-col-4-5 { width:80%; }
.m-col-5-5 { width:100%; }
}
@media only screen and (min-width:64em){
.l-col-1-2 { width:50%; }
.l-col-2-2 { width:100%; }
.l-col-1-3 { width:33.33%; }
.l-col-2-3 { width:66.66%; }
.l-col-3-3 { width:100%; }
.l-col-1-4 { width:25%; }
.l-col-2-4 { width:50%; }
.l-col-3-4 { width:75%; }
.l-col-4-4 { width:100%; }
.l-col-1-5 { width:20%; }
.l-col-2-5 { width:40%; }
.l-col-3-5 { width:60%; }
.l-col-4-5 { width:80%; }
.l-col-5-5 { width:100%; }
}
/* ------------------------
------------------------ */
/* ------------------------
Base Styles
------------------------ */
/* -- Fix box sizing -- */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* -- Base body styles -- */
body {
color: #444444;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 16px;
font-size: 1rem;
line-height: 1.75;
}
/* -- Headers -- */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
font-weight: 400;
}
h4 {
font-size: 22px;
font-size: 1.375rem;
}
/* -- Buttons -- */
.button,
button,
input[type=submit] {
display: inline-block;
cursor: pointer;
margin: 0 0 1.75em 0;
padding: 0.75em 1.1em 0.75em 1.1em;
font-weight: 400;
color: #444444;
background-color: #37C0FF;
border: none;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
}
.button--success {
background-color: #61E16C;
}
.button--warning {
background-color: #F5F02E;
}
.button--alert {
background-color: #FF5F5F;
}
/* ------------------------
------------------------ */
/* --------------------------------
Some global element control classes
-------------------------------- */
.txt-center {
text-align: center;
}
/* --------------------------------
-------------------------------- */
</style>
<div class="row">
<div class="col-2-2 m-col-1-2 txt-center">
<div class="profile-block">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSLmktkJrArXh_zZVovazl5mb3lna9HXqPo7XvvviCSQAuru5C" alt="" class="profile-img" />
<h4>John Smith</h4>
<p class="profile-bio">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In accusamus cum pariatur.
</p>
<button class="profile-more">
<i class="fa fa-plus"></i>
<i class="fa fa-minus"></i>
</button>
<i class="fa fa-play"></i>
<ul class="profile-social inline-list">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
<div class="col-2-2 m-col-1-2 txt-center">
<div class="profile-block">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSLmktkJrArXh_zZVovazl5mb3lna9HXqPo7XvvviCSQAuru5C" alt="" class="profile-img" />
<h4>John Smith</h4>
<p class="profile-bio">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In accusamus cum pariatur.
</p>
<button class="profile-more">
<i class="fa fa-plus"></i>
<i class="fa fa-minus"></i>
</button>
<i class="fa fa-play"></i>
<ul class="profile-social inline-list">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$('.profile-more').click( function() {
$(this).closest('.profile-block').toggleClass('social-visible');
});
</script>
Semoga bermanfaat.
https://pangeran-it.blogspot.com/
