Saturday, 07 May 2016 11:38

Buttons

Written by

3D Button

This 3D button is made purley by CSS. I think I have sued a button generator to create this intially but it is easier just to copy this button and alter as needed. Below is 2 buttons but they do not flow underneath easch other properly if the screen gets to small. If mulitple buttons are required I would make the Block Level elements using float etc...

HTML

<div style="text-align: center; margin: 60px 0;">
	<span style="padding: 10px; white-space: nowrap;"><a href="http://quantumwarp.com/" style="color: #e6e6e6; font-size: 20px; padding: 20px; text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: linear-gradient(0deg, #6b1d10 30%, #6b1d10 70%); -webkit-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75);">Book Online</a></span>
	<span style="padding: 10px; white-space: nowrap;"><a href="http://quantumwarp.com/" style="color: #e6e6e6; font-size: 20px; padding: 20px; text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: linear-gradient(0deg, #6b1d10 30%, #6b1d10 70%); -webkit-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75);">View Prices</a></span>
</div>

 

Read 941 times Last modified on Tuesday, 10 May 2016 17:47