How to Add a Button Style to Your Webpage

Your website has been launched. Congrats! You may be happy with the way things look for a while, but as you may know - creating new content is necessary to stay relevant online.

As you create your new web pages, you'll more than likely find yourself in the need of a stand out button. Stand out call-to-action (CTA) buttons let your customers know what action you want them to take. It keeps them from being distracted from all of the other links that are provided on your website. 

But, how did Virteom add that stylish BIG call-to-action (CTA) button that is sprinkled throughout your website? And, furthermore, how can I use that same style?

This how-to guide will show you how to add button styles to the links you create on your website.

Locating your button style

The first step in the process is locating the button style you want to replicate. Where does this button live? Do you see it on another page on the website? If so, navigate to that page on your site.

If you have are computer savvy, and can figure out how to use the developer tools - keep reading the next steps in this part.

If you have trouble, simply send us the URL of the page with the button you like with the following request to our help desk system:

Hello team,

Can you please tell me what the class of the button on this page? (Paste URL here).

Thanks,

If you're using Google Chrome, you can use developer tools to determine the class of the button. Right click on the button and click 'Inspect'. In the inspection tools, you'll see the class of the button. This is what you'll use to add to your new button.

In the example below, the class we want to remember is orbitButton

Locating your button style | How do I add a button in Virteom CMS

Adding your button style to a link

Once you have determined the name of the button style that you would like to use, it's time to apply it to the link you have created.

  1. Highlight the text you would like to make a button.
  2. Click the link button.
  3. (Make sure your link is typed in the URL box or your document is uploaded)
  4. Click over to the Advanced tab.
  5. In the "Stylesheet Classes" box, paste in the class of the button you copied from the button style you liked.
  6. Click "OK"
  7. Click "Save" at the top of the page
  8. Click "Preview" To see your changes
     
Adding your button style to a link | How do I add a button in Virteom CMS

Now you have a button!

Once you have the button style, every thing else is fairly simple. You just plug and chug.

If you have trouble finding the class you need to add in for the button style - don't shy away from asking a Virteom team member. We'll be happy to assist you so that you can produce your pages without a problem.

As always, if this how-to guide didn't get you what you needed - send in a ticket to our help desk or chat us on our LIVE help desk.

 

Most Recent

How to Create Private Pages with Virteom

By Olivia Justice
August 21, 2019 Category: How To

Sometimes you don't want everypage on your website accessible to the general public. That's why we offer the ability to create private pages that are only accessible to a designated user.

How to Add, Edit and Delete Photo Galleries Using PhotoGrid

By Olivia Justice
July 24, 2019 Category: Learning, Modules

How to Add, Edit and Delete Photos in the PhotoGrid Module Does your Virteom powered website have a photo gallery on it? Adding new photos to your gallery is really simple and even allows you to upload multiple images at one time. In this how-to article, we explain how to add new photos to the gallery, remove photos from a gallery, add captions and delete your photo gallery. Logging-In First things first, you must log-in to your Virteom powered website. You can do this by visiting your website and adding /virteom at the end. This will take you to the log-in screen for the site. Enter your email address in the email field Enter your password in the password field Click Login Navigate to the PhotoGrid Module Once youre logged-in you click Dashboard from the top gray editor menu. After clicking Dashboard use the left sidebar menu to navigate over to Modules. The module that handles gallery images is called PhotoGrid. Find PhotoGrid in the menu and click it. Now that you

How to Whitelist Emails

By Hayley Burke
July 08, 2019 Category: How To

Virteom shares our tech knowledge with you on how to never miss an email again by whitelisting email senders that you trust!