CSS Creative Design | Metallic design using HTML CSS

Categories: CSS / HTML

HTML Code

Create 4 button or you can use div instead buttons.

Give Class to them and let’s create magic in CSS file.

Below is HTML file Code.

<button class="gold">gold</button>
<button class="silver">silver</button>
<button class="bronze">bronze</button>
<button class="titanium">titanium</button>

CSS Code

Below is CSS file Code. 


.gold {
	background:conic-gradient(#edc800, #e3b600, #f3cf00, #ffe800,
								#edc800, #e3b600, #f3cf00, #ffe800,
								#edc800, #e3b600, #f3cf00, #ffe800,
								#edc800, #e3b600, #f3cf00, #ffe800);
}

.silver {
	background:conic-gradient(#d7d7d7, #c3c3c3, #cccccc, #c6c6c6,
								#d7d7d7, #c3c3c3, #cccccc, #c6c6c6,
								#d7d7d7, #c3c3c3, #cccccc, #c6c6c6,
								#d7d7d7, #c3c3c3, #cccccc, #c6c6c6);
}

.bronze {
	background:conic-gradient(#d95641, #b14439, #b2453a, #d25645, 
								#d95641, #b14439, #b2453a, #d25645,
								#d95641, #b14439, #b2453a, #d25645,
								#d95641, #b14439, #b2453a, #d25645);
}

.titanium {
	background:conic-gradient(#e6e9bf, #d2b5aa, #cbaea3, #d4b5ab,
								#e6e9bf, #d2b5aa, #cbaea3, #d4b5ab,
								#e6e9bf, #d2b5aa, #cbaea3, #d4b5ab,
								#e6e9bf, #d2b5aa, #cbaea3, #d4b5ab);
}

Watch Below Video for Detail Understanding

Search Your Keywords
Recent Post
Post Categories