3D Button creation using css

Tech Novice
Tech Novice used Ask the Experts™
on
Hi,

i need to create a 3d button as per the attached image,not getting any clue how to make such through css?
pls help
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
No image attached !!!

Author

Commented:
Apologies... Image attached.
Pci1.png
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Here is a 1min stab at it
CSS
<style>
button {
	border-top: 15px solid #cb6a27;
	border-bottom: 15px solid #ff9e44;
	border-left: 15px solid #d46011;
	border-right: 15px solid #ec6e17;
	width: 150px;
	height: 30px;
	line-height: 20px;
	padding: 0;
	color: white;
	position: relative;
}
button span {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	
}
</style>

Open in new window

HTML
<button><span>Test Button</span></button>

Open in new window

Author

Commented:
thanks
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial