about features designs pricing blog contact 7 Day Free Trial
left to receive 20% off! get coupon code
 

How to Turn Your Links Into Buttons

Making Fancy Buttons

Looking for a way to make your links stand out more? You're in the right spot! Here is a quick tutorial explaining how to make that happen. Note: This tutorial is a little more advanced. You will be dealing with HTML code in this tutorial but don't worry, we will walk you through it.

Button Types

There are two types of buttons available to you: Primary and Default. While both button types are the same size, they differ in color. Primary buttons take the primary color of your church website design, and default buttons are more of a subtle secondary color. Here is an example:


Note that the above example is taken from the "Light" website design. The buttons will adopt the style defined by the church website design you have selected in the settings area. Here is a sample of the same code (noted below) adopting the style of a different design:


Now it's your turn!

Here are the steps involved to make your first button:

  1. Login to your church website
  2. Go to the page you want your button on and click to edit the content
  3. Click the </> icon in the editor toolbar to switch to the HTML view (I know... scary huh? Don't worry, we will hold your hand)
  4. Scroll through the content to find the spot where you would like to insert your button.
  5. Insert the following code:
    1. Primary button code:
      <a href="https://www.churchlink.com" class="btn btn-primary">your button text here</a>
    2. Default button code:
      <a href="https://www.churchlink.com" class="btn btn-default">your button text here</a>
  6. Replace the https://www.churchlink.com with the URL to which you want for your button to link
  7. Replace the "your button text here" with the text you want to display on your button
  8. Click save and your done!

Optional · Open your link in a new tab or window

If you'd like your button to open the linked page in a new window/tab, then add this bit of code to the code above: target="_blank"

Your final code will look like this:
<a href="https://www.churchlink.com" class="btn btn-primary" target="_blank">your button text here</a>


Published on Sep 24, 2018

by: Mike Kurrle

09/24/2018

3

cancelsave
My site looks really sweet and has been very easy to edit. Thus far I think it might be the easiest-to-use as well as most-responsive website creator I've tried.
Ryan Franchuk
Pastor, Christ Fellowship, SD
ChurchSpring is by far the easiest church website management system I have ever used. Thank you for providing such an incredible service.
Randy Hockema
Lena Baptist Church