Add button to article


Author Message
Hoggis

Posted: 3/6/2010
Quote message 

I'm making a website wich I'm going to handle with a touchscreen later.
I would like to have big buttons to touch, like the "login", "submit" and "read more" button. How can I insert one or more buttons into a article or a module?
 
Exciter

Posted: 3/6/2010
Quote message 

In HTML source code.
Add this code.

<FORM action="http://address.com/page1.html">
<INPUT type="submit" class="button art-button" value="Button Caption">
</FORM>

Enjoy!
 
Hoggis

Posted: 3/9/2010
Quote message 

Great!! Thanks! :)

Is it possible to make different buttons (shape and colour) to choose between?
 
Colargol

Posted: 3/29/2010
Quote message 

Quote Hoggis:

Great!! Thanks! :)

Is it possible to make different buttons (shape and colour) to choose between?

I wounder about the same thing. Anyone who knows this?
 
Terry Mullins

Posted: 3/29/2010
Quote message 

Try out this link...

http://cssbutton.com/forms/
 
Hoggis

Posted: 3/30/2010
Quote message 

Quote Terry Mullins:

Try out this link...

http://cssbutton.com/forms/


I've uploaded a new button image file to the image folder that i've called Button2.png. Can I copy the CSS code for original button in template.css file and paste it below, and then edit the text so it referce to button2?

And could I use the HTML code:
<FORM action="http://address.com/page1.html"> <INPUT type="submit" class="button art-button2" value="Button Caption"> </FORM>


What schould the CSS text look like?

Heres the original CSS button code:
/* begin Button */
.art-button-wrapper .art-button
{
display:inline-block;
width: auto;
outline:none;
border:none;
background:none;
line-height:96px;
margin:0 !important;
padding:0 !important;
overflow: visible;
cursor: default;
text-decoration: none !important;
z-index:0;
vertical-align: middle;
}

.art-button img, .art-button-wrapper img
{
margin: 0;
}

.art-button-wrapper
{
display:inline-block;
vertical-align: middle;
position:relative;
height: 96px;
overflow:hidden;
white-space: nowrap;
width: auto;
z-index:0;
}

.firefox2 .art-button-wrapper
{
display:block;
float:left;
}

.art-button-wrapper .art-button
{
display:block;
height: 96px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: normal;
white-space: nowrap;
text-align: left;
padding: 0 56px !important;
line-height: 96px;
text-decoration: none !important;
color: #0E404E !important;
}

input, select
{
vertical-align: middle;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: normal;
}

.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #333333 !important;
text-decoration: none !important;
}

.art-button-wrapper.active .art-button
{
color: #283133 !important;
}

.art-button-wrapper .l, .art-button-wrapper .r
{
display:block;
position:absolute;
z-index:-1;
height: 288px;
background-image: url('../images/Button.png');
}

.art-button-wrapper .l
{
left:0;
right:41px;
}

.art-button-wrapper .r
{
width:471px;
right:0;
clip: rect(auto, auto, auto, 430px);
}

.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -96px;
}

.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -192px;
}


/* end Button */


 
James B

Posted: 4/1/2010
Quote message 


 
Exciter

Posted: 4/2/2010
Quote message 

WOW!!!
Why so?

Try this
<a href="#" class="button">Button Text</a>

 
Hoggis

Posted: 4/17/2010
Quote message 

Quote Exciter:

WOW!!!
Why so?

Try this
<a href="#" class="button">Button Text</a>



But this is the html. I need to define a second button/layout in css
 
Garry

Posted: 4/19/2010
Quote message 

You can insert following code to add a template matching button:

<a class="art-button" href="www.yoursite.com">Text on button</a>

 
Hoggis

Posted: 4/26/2010
Quote message 

Quote Garry:

You can insert following code to add a template matching button:

<a class="art-button" href="www.yoursite.com">Text on button</a>


Yes I understand that. But I want to add different buttons with different colour and shapes?
 
Garry

Posted: 4/26/2010
Quote message 

Simply change the class art-button to your custom one, add it in your style sheet and associate a new button image with it.

You should see art-button style from your stylesheet for help.
 
Hoggis

Posted: 5/3/2010
Quote message 

Quote Garry:

Simply change the class art-button to your custom one, add it in your style sheet and associate a new button image with it.

You should see art-button style from your stylesheet for help.

Here is my css for button (original) and button 2.

/* begin Button */
.art-button-wrapper .art-button
{
display:inline-block;
width: auto;
outline:none;
border:none;
background:none;
line-height:96px;
margin:0 !important;
padding:0 !important;
overflow: visible;
cursor: default;
text-decoration: none !important;
z-index:0;
vertical-align: middle;
}

.art-button img, .art-button-wrapper img
{
margin: 0;
}

.art-button-wrapper
{
display:inline-block;
vertical-align: middle;
position:relative;
height: 96px;
overflow:hidden;
white-space: nowrap;
width: auto;
z-index:0;
}

.firefox2 .art-button-wrapper
{
display:block;
float:left;
}

.art-button-wrapper .art-button
{
display:block;
height: 96px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: normal;
white-space: nowrap;
text-align: left;
padding: 0 56px !important;
line-height: 96px;
text-decoration: none !important;
color: #0E404E !important;
}

input, select
{
vertical-align: middle;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: normal;
}

.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #333333 !important;
text-decoration: none !important;
}

.art-button-wrapper.active .art-button
{
color: #283133 !important;
}

.art-button-wrapper .l, .art-button-wrapper .r
{
display:block;
position:absolute;
z-index:-1;
height: 288px;
background-image: url('../images/Button.png');
}

.art-button-wrapper .l
{
left:0;
right:41px;
}

.art-button-wrapper .r
{
width:471px;
right:0;
clip: rect(auto, auto, auto, 430px);
}

.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -96px;
}

.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -192px;
}


/* end Button */

/* begin Button2 */
.art-button2-wrapper .art-button2
{
display:inline-block;
width: auto;
outline:none;
border:none;
background:none;
line-height:96px;
margin:0 !important;
padding:0 !important;
overflow: visible;
cursor: default;
text-decoration: none !important;
z-index:0;
vertical-align: middle;
}

.art-button2 img, .art-button2-wrapper img
{
margin: 0;
}

.art-button2-wrapper
{
display:inline-block;
vertical-align: middle;
position:relative;
height: 96px;
overflow:hidden;
white-space: nowrap;
width: auto;
z-index:0;
}

.firefox2 .art-button2-wrapper
{
display:block;
float:left;
}

.art-button2-wrapper .art-button2
{
display:block;
height: 96px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: normal;
white-space: nowrap;
text-align: left;
padding: 0 56px !important;
line-height: 96px;
text-decoration: none !important;
color: #0E404E !important;
}

input, select
{
vertical-align: middle;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: normal;
}

.art-button2-wrapper.hover .art-button2, .art-button2:hover
{
color: #333333 !important;
text-decoration: none !important;
}

.art-button2-wrapper.active .art-button2
{
color: #283133 !important;
}

.art-button2-wrapper .l, .art-button2-wrapper .r
{
display:block;
position:absolute;
z-index:-1;
height: 288px;
background-image: url('../images/Button2.png');
}

.art-button2-wrapper .l
{
left:0;
right:41px;
}

.art-button2-wrapper .r
{
width:471px;
right:0;
clip: rect(auto, auto, auto, 430px);
}

.art-button-wrapper2.hover .l, .art-button-wrapper2.hover .r
{
top: -96px;
}

.art-button-wrapper2.active .l, .art-button-wrapper2.active .r
{
top: -192px;
}


/* end Button2 */


And in the article I type:
<a class="art-button2" href="www.yoursite.com">Text on button</a>
But theres no button, only text...what have I done wrong?
 
Bee Man

Posted: 5/10/2010
Quote message 

Have you tried eliminating reasons like bad path?

 
Stan

Posted: 1/26/2011
Quote message 

I'm interested in the same thing, how to make several art buttons but with different size for example, or some other attribute :-(. Big rounded button and small one in one article. Template logic seems to replace markup and uses some logic in functions.php and script.js to create additional spans and something else and simple copy paste art-button and art-button-wrapper css styles and renaming them is no enough. Did some one overcame described problem?
 
Linda S

Posted: 3/12/2012
Quote message 

Give MaxButtons Pro a try. Inexpensive. Very versatile with good back end controls which mean no coding needed to create custom buttons. Shortcode for insertion into text or sidebar areas. Some spacing issues, but they are working on that for next release.