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

Adding an External Link to Your Navigation

By Olivia Justice
August 17, 2018 Category: Navigation, Pages

Adding and deleting pages that exist within your website is easy with Virteom CMS - just check it out here. But what if you want a link to go out to a different website? Or to a PDF? Thats a little bit less intuitive. In this how-to article, well go over how to link to external web pages in your navigation and how to link to documents. How to link to an external website First things first, youll need to login to the back-end of your website. This is simply your domain URL with /virteom tagged on the end. (For example, ours is virteom.com)and then you enter /virteom after. To login to the back-end of our website, wed type virteom.com/virteom.) On this screen, youll enter your username and password Once youre logged in, click Site Pages (if youre on Rocketsites) or Navigation (if youre running Virteom CMS8 and under) Once youre on the Site Pages youll see your entire website structure. To add an external link to your navigation, locate the Main section and click the + next to

Why Does My Website Look Different in Different Browsers?

By Virteom
August 02, 2018 Category: Responsive

If you have ever wondered why your website looks different in different browsers, you dont have to worry that youre going crazy. There is a legitimate reason why your website may look off in different browsers, likeInternet Explorer. Read on to learn why this happens. Why Does my Website Look Different in internet explorer? Websites are made up of a set of instructions spoken in a web code language, most often HTML or CSS. Often, different browsers interpret code languages differently, which results in different interpretations. Here are some ways this issue affects your website: Browser Default Settings: When a browser reads the code behind your website, it translates the information in the default settings. For instance, Safari and Chrome have different default fonts, which means the font on your site changes when viewed in these browsers. For example,Safari defaults to the Helvetica familyand Microsofts Internet Explorer defaults to the Arial font family. Default issues are

How do I change my password?

By Olivia Justice
July 17, 2018 Category: How To

How do I change or reset my password? If you need to change your password in Virteom CMS (or Rocketsites 1.0) follow the directions outlined below: Log-in with your current credentials Visit your website/virteom to log-in to the back-end of your website and enter your current credentials: Navigate to Member Management After you log-in: Rocket Sites 1.0 -- Choose Dashboard from the top navigation Virteom CMS -- Choose Manager from the top navigation From the left-hand menu Choose Members Find Your Name / Account Once you are on the members page, search for your name (or locate it on the page) and click Edit Change your Password Now that you are on your member page: 1. Update your password by typing a new password in the Password box 2. Click Save Your Password is now updated! If you need any further assistance, please send a request in to our help desk!