Creating a Red Button

Hello,

I would like to create a button similar to the one in the attachment. What is the best way to go about creating it?

donate.jpg

Hi, of course use CSS3
see those online generators : http://css3buttongenerator.com/
or http://css3button.net/

when you get css code insert it into your template css files or just into source code of article.

Please see attached.

Without inserting additional code I button is as in attachment.

However I cannot center it nor choose the colors of?:


<input class="button" onclick="window.open('#')" type="submit" name="Submit" value="DONATE" /></p>




The following is from button generated site. But I don't know which file to insert it into nor do I know what I need to use to code in html.


.button {
font-family: Arial;
color: #ffffff;
font-size: 35px;
padding: 10px;
text-decoration: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
border: solid #d91c71 2px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fc3f94), to(#fc0574));
background: -moz-linear-gradient(top, #fc3f94, #fc0574);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#fc3f94, endColorStr=#fc0574);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#fc3f94, endColorStr=#fc0574);
display:inline-block; /* IE is so silly */
}
.button:hover {
background: #e62097;
}

Send me a link to page where have you got button than I will tell you.
But of course you can check by your self using firebug for firefox browser.

www.thechildrenofbotswana.org is where the buttons are.


issues:


1. Can't center them
2. Color should be red

Hi, ok let's try this...

CENTER:
Insert this code in overwrite field in template configuration or in css file.

Code: Select all

input.button {  margin:0 auto !important; }

BG RED COLOR:

Code: Select all

input.button {  background: #D75A46 !important; }

So put it together:

Code: Select all

input.button { margin:0 auto !important; background: #D75A46 !important; }

Hi, ok let's try this...

CENTER:
Insert this code in overwrite field in template configuration or in css file.

Code: Select all

input.button {  margin:0 auto !important; }

BG RED COLOR:

Code: Select all

input.button {  background: #D75A46 !important; }

So put it together:

Code: Select all

input.button { margin:0 auto !important; background: #D75A46 !important; }

I changed code to following because buttons were adjacent to each other without any space.

input.button {margin:0 50 0 50 !important; background: #c90000; !important; target="_parent; }

However code is still not working.

Code is in a table. 1 cell in bottom third row.

Issue 1.
Regardless of specifying center for table properties, row properties or cell properties.... buttons are still coming up to the left of the table.

issue 2.
Links open to new window. Should be parent window.

Hi, try <div style="..."> ...</div> code outside <input> buttons
It works for me:

custom code.png

Hi

I was asked by user to join discussion. Please try adding this code to css:

Code: Select all

td[align="center"] {
text-align: center;
}

td[align="center"] .button {
float: none;
}


Hi

I was asked by user to join discussion. Please try adding this code to css:

Code: Select all

td[align="center"] {
text-align: center;
}

td[align="center"] .button {
float: none;
}


This is the code for the table on the frontage. The code you suggested I input to Advanced Settings but still the buttons justified to the left and was ontop of one another.



<table id="The Children of Botswana" style="width: 554px; height: 249px;" dir="ltr" summary="Education Fund and Humanitarian Photography Archive " border="0" rules="all" align="center"><caption> </caption>
<tbody>
<tr>
<td id="The Children of Botswana" dir="ltr" align="center" valign="middle">
<h1 style="font-size: 40px; text-align: center;"><strong>THE CHILDREN OF BOTSWANA</strong></h1>
</td>
</tr>
<tr>
<td>
<h4 style="text-align: center;">A CONTEMPORARY PHOTOGRAPHY ARCHIVE <br />TO HELP EDUCATE BOTSWANA'S CHILDREN IN NEED</h4>
</td>
</tr>
<tr>
<td align="center"><input class="button" onclick="window.open('http://www.thechildrenofbotswana.org/donate')" type="submit" name="Submit" value="DONATE" /><input class="button" onclick="window.open('http://www.thechildrenofbotswana.org/login-to-view-archive')" type="submit" name="Submit" value="BUY A PRINT" /></td>
</tr>
<tr>
<td> </td>
</tr>

</tbody>
</table>

Hi

I do not see my code on the site. Please copy it into override.css and remember to allow using of this file in template settings.

Hi

I do not see my code on the site. Please copy it into override.css and remember to allow using of this file in template settings.

Hi...

sorry about misunderstanding: attachment show what your code does. i.e. buttons are now on top of one another and still justifies to the left.

Code is now in remote server's template's override.css.

Please advise

Hi

Please modifie the one of the classes I gave You to this:

Code: Select all

td[align="center"] .button {
    display: inline;
    float: none;
}