CSS Button Code

I want to place a CSS button in a module. I have the code for the button but nothing shows up in the module.

Code:
<a href="#" class="cta_button_css">click here!</a>
<style type="text/css">
.cta_button_css {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
background-color:#ffc477;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:20px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
}.cta_button_css:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
background-color:#fb9e25;
}.cta_button_css:active {
position:relative;
top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>

Hi,

Can you please give me the link to the page that contains that button to check?

Thanks,

Thanks Don, here is the link to the page: http://www.secbattles.com
The button is right under the COEDS section in the middle of the page. I would also like to link the button to a page.

Hi,

Can you please give me the link to the page that contains that button to check?

Thanks,

I have checked source code of the site, you are using a wrong selector:

Code: Select all

<style type="text/css">
.coed_button {
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #ef7c10) );
   background:-moz-linear-gradient( center top, #ffc477 5%, #ef7c10 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#ef7c10');
   background-color:#ffc477;
   border:2px solid #eeb44f;
   display:inline-block;
   color:#ffffff;
   font-family:Arial;
   font-size:22px;
   font-weight:bold;
   padding:8px 30px;
   text-decoration:none;
}.coed_button:hover {
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef7c10), color-stop(1, #ffc477) );
   background:-moz-linear-gradient( center top, #ef7c10 5%, #ffc477 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c10', endColorstr='#ffc477');
   background-color:#ef7c10;
}.coed_button:active {
   position:relative;
   top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>


The class of that button is "cta_button_css" but in the CSS code you use ".coed_button", that's why it's not working. Now try changing the button code to:

Code: Select all

<a href="#" class="coed_button">click here!</a>


If you want to link it, change "#" by your URL.

What css file could I just add a class to using this code (then call class with link:
.coed_button {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #ef7c10) );
background:-moz-linear-gradient( center top, #ffc477 5%, #ef7c10 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#ef7c10');
background-color:#ffc477;
border:2px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:22px;
font-weight:bold;
padding:8px 30px;
text-decoration:none;
}.coed_button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef7c10), color-stop(1, #ffc477) );
background:-moz-linear-gradient( center top, #ef7c10 5%, #ffc477 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c10', endColorstr='#ffc477');
background-color:#ef7c10;
}.coed_button:active {
position:relative;
top:1px;
}

I have checked source code of the site, you are using a wrong selector:

Code: Select all

<style type="text/css">
.coed_button {
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #ef7c10) );
   background:-moz-linear-gradient( center top, #ffc477 5%, #ef7c10 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#ef7c10');
   background-color:#ffc477;
   border:2px solid #eeb44f;
   display:inline-block;
   color:#ffffff;
   font-family:Arial;
   font-size:22px;
   font-weight:bold;
   padding:8px 30px;
   text-decoration:none;
}.coed_button:hover {
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef7c10), color-stop(1, #ffc477) );
   background:-moz-linear-gradient( center top, #ef7c10 5%, #ffc477 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef7c10', endColorstr='#ffc477');
   background-color:#ef7c10;
}.coed_button:active {
   position:relative;
   top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>


The class of that button is "cta_button_css" but in the CSS code you use ".coed_button", that's why it's not working. Now try changing the button code to:

Code: Select all

<a href="#" class="coed_button">click here!</a>


If you want to link it, change "#" by your URL.

Hi,

You can turn on CSS Override mode in your template setting, then add the css code to file override.css which is under css folder of your template.

Cheers,