One hot little Button....

User 528054 Photo


Registered User
209 posts

Hello,
I have used the code snippet within CoffeeCup HTML Editor,
and would like to know how, if its possible, I can change the colour of the button the snippet generates, also the font for text displayed on the button.

A straight forward example of the code required would be appreciated if it is possible to do it..

Thankyou
Peter
User 184085 Photo


Ambassador
1,707 posts

Could you post the snippet code here, I don't think that snippet made it into the recent 2009 release.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 528054 Photo


Registered User
209 posts

Here it is.... It did make it into the 2009 release.

<form action="alink.html"><input type="submit" value="Click Me." /></form>

Regards
Peter
User 184085 Photo


Ambassador
1,707 posts

OK so you have;

<form action="alink.html"><input type="submit" value="Click Me." /></form>


and if you add a 'class' to the input so you have

<form action="alink.html"><input class='button' type="submit" value="Click Me." /></form>


then you just add the class to your css

. input button {

background-color:transparent;

background-image:url(images/button.gif);

border:1px solid #CCCCCC;

font:14px Arial, Helvetica, sans-serif;

color:#FF3333;

width:100px;

height:30px;

}


just modify or delete the declarations in the css to suit your needs

Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 528054 Photo


Registered User
209 posts

Heaven's.... David, I will set it up,
and take it down to see how it works.

Thankyou
Peter
User 3004957 Photo


Registered User
848 posts

You can style any of the form elements (text fields, buttons etc.) by using in-line styles or an external style sheet. If you don't yet know about CSS stuff, it is well worth learning the basics as it will revolutionise your web design. As David points out, you can tart up the button with whatever you like by changing the colour of the button, font and size and colour of the text, borders, rollovers and whatnot. You can even create your own hover buttons (there is a snippet on the share your snippets page) to carry out form actions so you are not tied to 'standard' buttons at all.

In the editor, if you type in the form tag then type style, options will be presented as to what you can alter to change the look of the element. See the attached code for just a few of the changes using in-line styles. Copy and paste this into the editor and have a play with the variables to create your own button.

<form action="alink.html"><input type="submit" value="Click Me" style="border:dotted 1px red; font-family: sans-serif; font-size:10pt; color: #FFFFFF; background-color: Green ; width: 90px; cursor: crosshair; height:35px;"></form>


Nice buggy by the way, yours?

Dave.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.