CSS Button Code Not Working?

[chrispking]

Hi

I've created a button that I want to use with my Metro Pro theme site http://www.thetrainhacker.com..

Disclaimer: I'm not a coder and don't have a clue what I'm doing 🙂

I've got two problems..

1. When I insert the code into my style.css via Edit Themes and then try and create a button such as...

Call to Action

..no button shows up all I get is text link

2. Right Align
..I'd also like to ensure that it always appears right aligned as well...

Here's the code that I created using http://css3buttongenerator.com/

.btn {
background: #f96e5b;
background-image: -webkit-linear-gradient(top, #f96e5b, #f7432a);
background-image: -moz-linear-gradient(top, #f96e5b, #f7432a);
background-image: -ms-linear-gradient(top, #f96e5b, #f7432a);
background-image: -o-linear-gradient(top, #f96e5b, #f7432a);
background-image: linear-gradient(to bottom, #f96e5b, #f7432a);
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 7px 20px 7px 20px;
border: solid #f62d11 1.5px;
text-decoration: none;
}

.btn:hover {
background: #f62d11;
text-decoration: none;
}

Thanks in advance.

Chris

[Marcy]

When you add the text in your WordPress editor, you will need to change to the editor Text tab.
Find the link that you created that you want to be a button; it will look like this:
<a rel="nofollow" href="#">Call to Action</a>
In place of the # though you need to make sure that you used a real URL.

Then you tell it to use your .btn CSS by adding class="btn", like this:
<a class="btn" rel="nofollow" href="#">Call to Action</a>

Save, and then you should be able to go back to the Visual tab to finish editing.

---

Marcy | Amethyst Website Design | Twitter

[chrispking]

Hi Marcy

Thanks very much for your response.

The code is in my stylesheet and I've inserted the button on this page http://thetrainhacker.com/blog/night-riviera-sleeper/ (at the bottom of the content area).

I've inserted...
<a class="btn" href="http://thetrainhacker.com/">The Train Hacker</a>

..however, it appears as a text link?!

Thanks in advance.

Chris

[Marcy]

First, find this selector:

.entry-content a {
    color: #f96e5b;
}

Add this below it:

.entry-content a.btn {
background: #f96e5b;
background-image: -webkit-linear-gradient(top, #f96e5b, #f7432a);
background-image: -moz-linear-gradient(top, #f96e5b, #f7432a);
background-image: -ms-linear-gradient(top, #f96e5b, #f7432a);
background-image: -o-linear-gradient(top, #f96e5b, #f7432a);
background-image: linear-gradient(to bottom, #f96e5b, #f7432a);
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Arial;
color: #ffffff;
font-size: 18px;
padding: 7px 20px 7px 20px;
border: solid #f62d11 1.5px;
text-decoration: none;
}

.entry-content a.btn:hover {
background: #f62d11;
text-decoration: none;
}

Then down in the color sections find all the lines similar to :
.metro-pro-blue .btn:hover,
and comment them out by added /* */ around them like this:
/*.metro-pro-blue .btn:hover,*/

---

Marcy | Amethyst Website Design | Twitter

[chrispking]

Hi Marcy

How can I thank you enough 🙂 but saying I'm extremely grateful for your kindness and expert knowledge.

I've been tinkering around for a few hours now and thanks to your help I've got amazing buttons http://thetrainhacker.com/railcards/family-friends-railcard/ My goal was to create a highlighted box/button to convert higher affiliate offers. I found this Studiopress article http://www.studiopress.com/design/colored-content-boxes-buttons.htm but didn't like the buttons. The box needs some work but it's fine for now.

At one point before I got this post I did get the buttons working but they looked like a hybrid of the one I wanted and the one above. I de-installed the W3 Total Cache plug in as that was causing havoc with both the button and the box.

I'm very grateful for your help.

Wish you all the happiness, health and success for 2015.

Chris

[Marcy]

Your buttons are lovely, Chris! I'm glad it all worked for you.

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts