The content on this page will explain how to add nice buttons that look similar to the one below.

This is a Button

 

 

It's possible to add a number of different styles of buttons to your page, and all of them behave in different ways, in this example, all we've done is place a paragraph text html element <p> into a link<a>, and then applied a moderate amount of formatting to it.

 

Here we've embedded some sample code in a JSFiddle showing how to do this.

What you need to do...

First off, you need to create a 'Style' for your button, which isn't as scary as it sounds. You can see the style for my buttons in the 'CSS' tab of the JSFiddle above

.nice_button {
    /*This changes the colour of the button text*/
	color:white !important;        
	border: 0px;
	margin: 5px;
	padding: 10px;
	float: left;
	display: block;
    /*This changes the width of the button, more than 200px, should use % instead of pixels so resizes appropriately on mobile.*/
	width: 200px;                     
	-webkit-box-shadow: rgba(0, 0, 0, 0.6) -1px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.6) -1px 1px 2px;
	font-size:1.3em;
    /*Text alignment on the button, this can be set to center or left, note american spelling.*/
	text-align: center;                
	text-shaddow:none;
	-webkit-text-stroke-width: 0px;
	text-decoration: none;
    /*This is the fallback button color, if the fancy gradient code below doesn't work in some browsers*/
    background-color:red;  
    /*This is the code for a slightly nice two-tone gradient button you may need to ask your graphic designer or marketing department for RGB colours to use, if you pick your default     union colour, and another tone just off, this is colour one, and this is colour two.*/       
	background: linear-gradient(45deg, rgb(150, 0, 60) 0%, rgb(255, 00, 40) 100%);      
}

N.B. The Button will use your Union default <p> font, unless you override it.

Once you've created your style...

You then need to put the style into your website somewhere, if you have access to the advanced Developers Toolkit, navigate to Dashboard >> MARCOMS >> Developers Toolkit >> Appearance >> Global CSS and drop your style in that box there. Be careful to put it before / after any other code, and not to delete other important bits!

If you don't have the Advanced Developers Toolkit, it's possible to add the code another way, you would need to include the code in a page that occurs everywhere on your website (something like the footer), if you edit your footer, change it to 'Source' view, and then the following tags at the bottom <style> .... </style> and then replace the .... with the css style we've just written.

Next

You need to add the actual button to your page, this is the easy bit, you can copy the code from the HTML tab of the JSFiddle window above.

<p><a class="nice_button" href="http://www.google.com"><span>Click Me</span></a></p>

You need to give the button a class so that it takes the style you have created, earlier.

Next you set where you want the button to link to, it's important to include the full url, even the HTTP or HTTPS.

Finally what text you want displayed on the button.

That's it!

If you take the code above, and paste it into your web page somewhere, in the source view, make sure it's in the right bit of the text, if you aren't used to reading HTML, you might need to try a couple of times to make sure you put it in the right place.