CSS code for button, where and how to add code to site

  • LindaRRR

    (@lindarrr)


    7 years, 10 months ago

    I used a CSS button generator and have code for the button, but am confused where and how I place this code.
    In CSS? Where? Then how do I indicate in HTML that I want the button placed on a page?
    In HTML? Some online info talks about putting it in the “Header”. Where do I find that?
    Obviously I am not technologically savvy, so basic information will be most helpful.

    .btn {
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  border-radius: 12px;
  -webkit-box-shadow: 6px 6px 6px #666666;
  -moz-box-shadow: 6px 6px 6px #666666;
  box-shadow: 6px 6px 6px #666666;
  font-family: Arial;
  color: #ffffff;
 font-size: 36px;
  background: #d6301f;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #d63O1f;
  background-image: -webkit-linear-gradien

    t(top, #d63O1f, #f00909);
    background-image: -moz-linear-gradient(top, #d63O1f, #f00909);
    background-image: -ms-linear-gradient(top, #d63O1f, #f00909);
    background-image: -o-linear-gradient(top, #d63O1f, #f00909);
    background-image: linear-gradient(to bottom, #d63O1f, #f00909);
    text-decoration: none;
    }`

Viewing 5 replies - 1 through 5 (of 5 total)
  • GuyPrimavera

    (@guyprimavera)

    7 years, 10 months ago

    Hi Linda,

    If you don’t have access to your website’s files through FTP, you can add this code through your WordPress admin area (if you have an Administrator account).

    1. In your admin area, go to “Appearance” > “Editor”.
    2. Look at the “Styles” section on the right-hand side and select your main stylesheet (probably called “style.css”).
    3. Scroll to the very bottom and paste your code after everything else in the file.
    4. Click “Update file”.

    Your website should now show the changes. There might be issues with more complex code and media queries (when the site is viewed on smaller devices), but just changing a button’s appearance shouldn’t cause any problems.

    GuyPrimavera

    (@guyprimavera)

    7 years, 10 months ago

    Also please note that a theme update will overwrite these changes, so the best long term solution would be with a child theme, but you would need access to the website through FTP for that.

    Thread Starter LindaRRR

    (@lindarrr)

    7 years, 10 months ago

    Guy –
    Thanks so much for your very clear help.
    I added the button css code to the bottom of the css style sheet as you suggested.
    My next questions is what do I add to the page html to have the button show on a page. And what do I add to html so the button links properly.

    I am currently using the Genesis Agency Pro child theme.
    http//:www.lindavarone.com

    Thread Starter LindaRRR

    (@lindarrr)

    7 years, 10 months ago

    Guy – I found some html code online which seems to be working for me:
    <a href="#">text on button</a>
    Thanks so much for your help.

    GuyPrimavera

    (@guyprimavera)

    7 years, 10 months ago

    Hi Linda,

    No worries! Yes that code will give you a link, but you’ll need to add a “class” to it to get the styles from your new piece of CSS code, which will look like this:

    <a href="#" class="btn">text on button</a>

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS code for button, where and how to add code to site’ is closed to new replies.