Social Media UI button | CSS Tutorial

Categories: CSS / HTML

HTML Code

Create a button group and add different button section inside it.

Below is HTML file Code.

<body>
	<h1>Metallic Buttons</h1>

	<div class="btn-group">
		<!-- GOLD  -->
		<button class="custom-btn btn-1">Gold</button>
		<button class="custom-btn btn-2">Gold</button>
		<button class="custom-btn btn-3">Gold</button>
		<button class="custom-btn btn-4">Gold</button>
		<br>
		<!-- SILVER -->
		<button class="custom-btn btn-5">Silver</button>
		<button class="custom-btn btn-6">Silver</button>
		<button class="custom-btn btn-7">Silver</button>
		<button class="custom-btn btn-8">Silver</button>
		<br>
		<!-- ROSE -->
		<button class="custom-btn btn-9">Rose</button>
		<button class="custom-btn btn-10">Rose</button>
		<button class="custom-btn btn-11">Rose</button>
		<button class="custom-btn btn-12">Rose</button>
	</div>
</body>

CSS Code

Below is CSS file Code. 

h1 {
	position: relative;
	text-align: center;
	color: #333;
	font-size: 50px;
	font-family: 'Lobster', cursive;
	margin-top: 10%;
}
h1:before {
	position: absolute;
	content: "";
	bottom: 0;
	width: 40%;
	height: 2px;
	background-color: #98d9e1;
	background-image: linear-gradient(315deg, #fea 0%, #a95 80%);
}

.btn-group {
	margin: 40px auto;
	text-align: center;
}
button {
	margin: 20px;
}
.custom-btn {
	width: 130px;
	height: 40px;
	border-radius: 5px;
	padding: 10px 25px;
	font-family: 'Lobster', cursive;
	font-weight: 900;
	cursor: pointer;
	font-size: 16px;
	outline: none;
	border: transparent;
	color: #fff;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}
.custom-btn:active {
	transform: translate(2px);
	-webkit-transform: translate(2px);
}

/* 1 */
.btn-1 {
	background: linear-gradient(180deg,
					#fea 0%,#dc8 49%,#a95 51%,
					#dc8 100%);
}
/*2*/
.btn-2 {
	background:linear-gradient(top, #a95, #f2f2f2 25%,
				#fff 38%, #c5c5c5 63%, #f7f7f7 87%, #a95);
	background: -webkit-linear-gradient(top, #a95, #fea 25%,
				#fff 38%, #dc8 63%, #fea 87%, #a95);
}
/*3*/
.btn-3 {
	background: linear-gradient(#a95, #fea);
}
/*4*/
.btn-4 {
	background-image: -webkit-repeating-linear-gradient(
		left, rgba(255, 238, 170, 0)0%,
		rgba(255, 238, 170, 0)3%,
		rgba(255, 238, 170, 0)5%),
		linear-gradient(180deg, #a95 0%,
			#fea 47%, #dc8 53%, #fea 100%);
}
/*5*/
.btn-5 {
	background: linear-gradient(180deg,#e6e6e6 0%,
				rgba(0,0,0,0.25) 49%,
				rgba(38,38,38,0.6) 51%,
				rgba(0,0,0,0.25) 100%);
}

/*6*/
.btn-6 {
	background: linear-gradient(top, rgba(38,38,38,0.8),
				#e6e6e6 25%, #fff 38%, #c5c5c5 87%,
				rgba(38,38,38,0.8 ));
	background : -webkit-linear-gradient(top, #c5c5c5,
				#e6e6e6 25%, #fff 38%, #c5c5c5 87%,
				#c5c5c5);
}

/*7*/
.btn-7 {
	background: linear-gradient(#c5c5c5, #e6e6e6);
}

/*8*/
.btn-8 {
	background-image: -webkit-repeating-linear-gradient(
		 left,hsla(0,0%,100%,0) 0%,hsla(0,0%,100%,0) 6%,
		 hsla(0,0%,100%, .1) 7.5%),
		-webkit-repeating-linear-gradient(
		 left,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,0) 4%,
		 hsla(0,0%,0%, .03) 4.5%),
		-webkit-repeating-linear-gradient(
		 left,hsla(0,0%,100%,0) 0%,hsla(0,0%,100%,0) 1.2%,
		 hsla(0,0%,100%, .15) 2.2%),
		linear-gradient(180deg,
			hsl(0,0%,78%) 0%,
			hsl(0,0%,90%) 47%,
			hsl(0,0%,78%) 53%,
			hsl(0,0%,70%) 100%);
}


/*9*/
.btn-9 {
	background: linear-gradient(180deg,
				#ffe6e9 0%, #dda6ae 49%,
				#b76e79 51%, #dda6ae 100%)
}

/*10*/
.btn-10 {
	background: linear-gradient(top,
		#dda6ae, #ffe6e9 25%, #fff 38%,
		#ffe6e9 63%, #f7f7f7 87%,
		#dda6ae);
	background: -webkit-linear-gradient(
		top,
		#dda6ae, #ffe6e9 25%, #fff 42%,
		#ffe6e9 40%, #f7f7f7 10%,
		#dda6ae);
}

/*11*/
.btn-11 {
	background: linear-gradient(#dda6ae, #ffe6e9);
}

/*12*/
.btn-12 {
	background-image: -webkit-repeating-linear-gradient(
		            left, rgba(255, 230, 230, 0) 0%,
		            rgba(255, 230, 230, 0) 3%,
		            rgba(255, 230, 230, .1) 3.75%),
					-webkit-repeating-linear-gradient(
		            left, rgba(183, 110, 121, 0) 0%,
		            rgba(183, 110, 121, 0) 2%,
		            rgba(183, 110, 121, .2) 2.25%),
		            linear-gradient(180deg, #d9a3a9 0%,
		            	rgba(255, 230, 233, 1) 47%,
		            	#d9a3a9 53%,
		            	rgba(255, 230, 233, .7) 100%);
}

Watch Below Video for Detail Understanding

Search Your Keywords
Recent Post
Post Categories