Call to Action Button

I wanted to add a prominent call to action button on the home page sidebar. I also didn’t want to use a graphical button because those won’t change size if the user changes the text size in the browser. Having noticed that the WordPress site does this, I decided to just do what they did.

The button is actually a thin png graphic file with a gradient. It’s a slice just 5 pixels wide. The key is to set it as the background image and let it repeat. The rounded corners were done by setting border radius CSS settings.

The button was added by appending the HTML to the home sidebar page.

<div id="location-container">
    <a class="location-button" href="site/location">Worship with us!</a>

The next thing to do was to add the CSS code necessary to style the button and get it to behave properly on hover. This code was basically taken from the WordPress site.

#location-container {	margin-top: 20px;
margin-bottom: 10px;	
text-align: center;}

a.location-button {font-size: 14px;	
font-weight: bold;	
background: #21759B url('images/button-grad.png') repeat-x scroll left top;	
color: white;	
padding: 6px 12px 6px 12px;	
-moz-border-radius: 12px;	
-khtml-border-radius: 12px;	
-webkit-border-radius: 12px;	
border-radius: 12px;	
text-shadow: rgba(0,0,0,0.3) 0 -1px 0;}

a.location-button:hover {border-color: #13455B;	
color: #EAF2FA;	
text-decoration: none;}

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s