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.

 

/ Print
Posted by Olivia Justice in Buttons

Comments


Be the first to comment
Name*
E-mail*
Website
Comment*
0 Pending Comments
 Keep me updated of follow-up comments!
Most Recent

By Olivia Justice
September 13, 2017 Category • Buttons

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, youll 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 yourwebsite? 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

By Olivia Justice
August 22, 2017 Category • Forms, Form Submissions

Worried you may have missed a lead? Checking who has submitted a form on your website is easy with form submissions. Form submissions allow you to see who has submitted a response to any form on your website in one Excel file. Keep reading to learn how to access your form submissions in Virteom CMS. Login to the CMS Click on Manager Click on Forms on the left-hand side Click on Submissions on the left-hand side underneath forms Choose What Form Youd like to see Submissions From the dropdown menu select the form you would like to see submissions for. The dropdown menu goes by thename of the form. Export Submission(s) to Excel Now that you are on the form youd like to see submission for, click the Click to ExportxxSubmission(s) To Excel Check that you did not miss a lead! The file will export as an Excel Spreadsheet. You can view all of your form submissions that have come through on the specific form you chose on this spreadsheet. If youd like to

By Olivia Justice
March 24, 2017 Category • How To, Image Resize

Is your website powered by Virteom CMS? Do your images look good on your laptop but not on your 4k monitor? Are your pictures a good size on desktop but become oversized or deformed on a mobile device? More than likely youre using pixels to set the dimensions of your photos, but is that the best way? This article will explain how you should be sizing the images on your Virteom powered website so that they look good across all devices. As you make edits and additions to the pages of your website you find yourself adding images to support your content. Typically, the size of your image is too large for your page and with the popup picture below you set dimensions of your image using pixels: Setting your images dimensions using pixels is what makes your image stretch on your cell phone or from one screen to another. You dont want to use pixels to set the dimensions of your images. For example: Here we have a picture of a tablet: Once we add it into the image uploader we see the width

Get In Touch
We Tweets
Virteom ©