Cara Membuat Tombol Social Share Responsif

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Tombol Social Share Responsif. Dalam tutorial ini, kita akan melihat cara menyesuaikan tombol berbagi sosial responsif untuk berbagai area pandang perangkat. Jika Anda ingin tahu tentang apa itu desain responsif, lihat tutorial ini.

Dalam contoh ini, saya menunjukkan ikon berbagi sosial atau tombol teks berdasarkan lebar layar media. Kami juga mengelola posisi tombol ke lokasi yang berbeda pada layar perangkat.

<html>
<head>
		<title>Responsive Social Share Buttons</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
		
		<h1>Responsive Social Share Buttons</h1>
		<div id="share-box">
			<div class="btnShare btnFacebook"><img src="facebook.png"  class="icon-share"><span class="txt-share">Facebook</span></div>
			<div class="btnShare btnTwitter"><img src="twitter.png" class="icon-share"><span class="txt-share">Twitter</span></div>
			<div class="btnShare btnGoogle"><img src="google-plus.png" class="icon-share"><span class="txt-share">Google</span></div>
		</div>
		<div class="txt-content">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis tempore ipsum fugiat sit placeat qui voluptas, dolores, dolorem in tenetur, accusantium blanditiis. Necessitatibus maiores quos quis veniam facilis. Aut, quis.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis tempore ipsum fugiat sit placeat qui voluptas, dolores, dolorem in tenetur, accusantium blanditiis. Necessitatibus maiores quos quis veniam facilis. Aut, quis.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis tempore ipsum fugiat sit placeat qui voluptas, dolores, dolorem in tenetur, accusantium blanditiis. Necessitatibus maiores quos quis veniam facilis. Aut, quis.</p>
</div>	
</body>
</html>

CSS untuk Tombol Social Share Responsif

CSS berikut  ini berisi kueri media untuk mengelola posisi tombol berbagi sosial dengan menggunakan posisi CSS dan properti float.

body{width:610px;margin:0 auto;}
#share-box {	
position: relative;
float:left;
}

.btnShare{
float:left;
padding: 10px; 
margin-right:15px;
cursor: pointer;
} 

.btnFacebook {background: #7AA2FE;}

.btnTwitter {background: #00DEFF;}

.btnGoogle {background: #FCBDB3;}

.txt-content {clear:both;padding-top: 5px;}

.txt-share{color: #FFF;padding-left:5px;}

@media screen and (min-width: 845px) and (max-width: 1044px) {
	body{width:50%;margin:0 auto;}
	#share-box {	
	position: absolute;
	top:100px;
	float:left;
	} 

	.btnShare{
	clear:both;
	padding: 15px; 
	cursor: pointer; 
	border-bottom-left-radius:5px;
	border-top-left-radius:5px;
	margin-bottom:15px;
	}

	.txt-content {
	border-left: #F0F0F0 1px solid;
	padding-left: 20px;
	margin-left: 54px;
	}	
	.txt-share{display:none;}
}

@media screen and (max-width: 844px) {
	body{width:80%;margin:0 auto;}
	.btnShare {	
	float: left;	
	padding: 15px; 
	cursor: pointer; 
	border-radius:5px;
	} 
	.txt-share{display:none;}	
}

Berikut hasilnya;

Oke itulah tadi pembahasan saya tentang Cara Membuat Tombol Social Share Responsif, semoga bermanfaat.