How to change Preview and Send buttons using CSS

Hope you guys can help me out

I need a CSS code to modify the "Preview" and "Send" buttons on my Forum. I want the same colors and design.

http://www.thefacebookforum.net/

I want them to look like this


And when the mouse is hover, like this


Thanks!

i like your Rank ;D

oo show us the page , which you want the button to be like .

Thanks : I love my rank as well

Those buttons were taken out from Facebook, since my Forum is called Facebook Forum (Duh! LOL) . You can find them there

it was suppose to be mine >:0 ( rips of your rank ) ( Computer screen gets broken ) ( xD )

to do this , you can view this tutorial ;D

http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/

you may learn many new things and get advanced there
you can check out other cool tutorials there ;D

LOL, I won, you didn't *shows the trophie* LOL

I'll take a look. If someone else also knows the answer please let me know. Thanks.

Maybe this helps.

This CSS modifies my buttons, I believe

Code:

/* Input Button Form---------------------------------------------------------*/
input.button1, input.button2, button.button2 {
    font-size: 1em;
    }
a.button1, input.button1 {
   font-weight: bold;
   border: 1px solid #666666;
   }
a.button2, input.button2, button.button2 {
   border: 1px solid #BCBCBC;
   }
a.button1, input.button1, a.button2, input.button2, button.button2 {
   width: auto !important;
   padding: 2px 3px;
   font-family: Tahoma;
   color: #000000;
   background-repeat: repeat-x;
   background-color: #FAFAFA;
   background-image: url('http://2img.net/i/fa/prosilver/bg_button.gif');
   background-position: top;
   overflow: visible;
   }
body:last-child a.button1, input.button1, a.button2, input.button2, button.button2 {
   
/* Opera does not see this */
padding: 1px 0;
   }
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
   border: 1px solid #00ffff;
   color: #00ffff;
   background-position: 0 100%;
   }
a.button1:link, a.button1:visited, a.button1:active, a.button2:link, a.button2:visited, a.button2:active {
   color: #00010d;
   text-decoration: none;
   padding: 2px 8px;
   line-height: 250%;
   vertical-align: text-bottom;
   background-position: 0 1px;
   }
* html input.button1, * html input.button2, * html button.button2 {
   padding-bottom: 0;
   margin-bottom: 1px;
   }
*+html button.button2 {
   height: 24px;
   padding-right: 3px;
   padding-left: 3px;
   }
*+html button.button2 img {
    vertical-align: middle;
    }
* html button.button2 {
   height: 24px;
   padding-right: 3px;
   padding-left: 3px;
   }
* html button.button2 img {
    vertical-align: middle;
    }

So it'd be needed to change colors, font, font color, etc. Anyone can give it a try?

*snatches your trophy while you're raising it xD

O_o read the tutorial i gave you , my result is :

http://kmlforumhl.forumotion.net/Test2-h14.htm

( i just copied the example they give )

or if you dont want , i can help , but , not now ( or never ) =0 it requires lots of headache to do that

Code:

 input.button1:hover {
    border: 1px solid #FF8040;
background-image: url('http://i48.tinypic.com/orv5kx.gif') !important;
background-repeat: repeat-x;
background-position: top;

    }



 input.button2:hover{
    border: 1px solid #FF8040;
background-image: url('http://i48.tinypic.com/orv5kx.gif') !important;
background-repeat: repeat-x;
background-position: top;
    }


On hovering over, it changes the colors of both preview & send option in advanced mode. However, the default buttons style does not get over ridden by the code i was trying to put.

Hello,

You just need to make a background that look similar to facebook buttons. And add this code to your CSS...

Code:

input[type="submit"].button2 {
background : url(BACKGROUND IMAGE URL) repeat !important;
border : 1px solid #CCC;
}
input[type="submit"].button2:hover {
background : url(BACKGROUND IMAGE URL) repeat !important;
border : 1px solid #000;
}

Sorry Sanket, didn't understand your post fully.

Is that code you gave me a new code that needs to be pasted or one part that needs to be replaced? Is it already finished or I need to edit it?

Thank you!

@Anikilen:

I'm in a really slow computer right now and don't have Photoshop in here. Mind handing me the HEX code please?

I also noticed that the Send button has a little orange border when clicked. How to add that?

I also believe that that code just modifies the Send button, but not the Preview button

This code would help.
It works for both the buttons.

Code:

input[type="submit"].button2 {
    background : #226FB3;
    border : 1px solid #CCC;
    color : #fff;
    font-weight : bold;
    font-size : 13px;
    }
    input[type="submit"].button2:hover {
    background : #CCC;
    border : 1px solid #333;
    color : #333;
    }

EDIT :

Avoid double posting unless separated by 24 hours. Use the EDIT button.

But will both buttons look the same? Or can you make one look blue and the other gray?

Not sure if this helps, but got something from the blue Facebook button

Code:

-webkit-box-shadow: rgba(0, 0, 0, 0.117188) 0px 1px 0px 0px;
background-color: #5B74A8;
background-image: url(http://static.ak.fbcdn.net/rsrc.php/z1V2B/hash/apfsevhg.png);
border-bottom-color: #1A356E;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #29447E;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #29447E;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #29447E;
border-top-style: solid;
border-top-width: 1px;
display: inline-block;
height: 25px;
margin-left: 5px;
outline-color: #333;
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-decoration: none;
vertical-align: bottom;
width: 75px;

And for the gray button

Code:

-webkit-box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 0px 0px;
background-color: #EEE;
background-image: url(http://static.ak.fbcdn.net/rsrc.php/z1V2B/hash/apfsevhg.png);
border-bottom-color: #888;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #999;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #999;
border-top-style: solid;
border-top-width: 1px;
display: inline-block;
height: 25px;
margin-left: 5px;
outline-color: #333;
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
vertical-align: bottom;
width: 62px;

TheListener wrote:But will both buttons look the same? Or can you make one look blue and the other gray?

Yes, this code will do it...

Code:

/* For preview button */
input[name="preview"].button2 {
    background : #226FB3;
    border : 1px solid #333;
    color : #fff;
    font-weight : bold;
    font-size : 13px;
    padding : 3px;
    }
/* For post button */
input[name="post"].button2 {
    background : #EEE;
    border : 1px solid #333;
    color : #333;
    font-weight : bold;
    font-size : 13px;
    padding : 3px;
    }

-----------------------

We should not copy any codes from Facebooks style sheet.

Almost there. Now the Hover is missing, but we're close to the final result

Houston, we got a problem!

Anikilen, the code you gave me make them look a bit flat, so I thought using some codes I got from Facebook's CSS (which aren't copyrighted) and used this:

Code:

/* For post button */
input[name="post"].button2 {
          color : #fff;
    font-weight : bold;
    font-size : 13px;
background-color: #5B74A8;
border-bottom-color: #1A356E;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #29447E;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #29447E;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #29447E;
border-top-style: solid;
border-top-width: 1px;
display: inline-block;
height: 25px;
margin-left: 5px;
outline-color: #333;
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-decoration: none;
vertical-align: bottom;
width: 75px;
    }
/* For preview button */
input[name="preview"].button2 {
      color : #333;
    font-weight : bold;
    font-size : 13px;
    padding : 3px;
background-color: #EEE;
border-bottom-color: #888;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #999;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #999;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #999;
border-top-style: solid;
border-top-width: 1px;
display: inline-block;
height: 25px;
margin-left: 5px;
outline-color: #333;
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
vertical-align: bottom;
    }

At first they show up correctly. Then the page finishes loading and the background's colors disappear. What am I doing wrong?

Still looking for help.

A guy at another Forum could make this http://ajberri.com/css/facebook/

If you click on "Download" you can get the .css file with the code.

The problem is I need someone to make those codes work on the one that anikilen gave me. Any ideas?

I got it.
Here is the perfect code...

Code:

input[name="preview"].button2 {
background : url(images/bg-1.png) top repeat-x #5F78AB;
color: #FFFFF0;
font-weight: bold;
padding: 0px 6px 4px 6px;
font-size: 1em;
height: 25px;
border: 1px solid #29457F;
}
input[name="preview"].button2:hover {
border:1px #836B40 solid;
background-image : none;
background-color: #4F6AA3;
}

input[name="post"].button2 {
background : url(images/bg-2.png) top repeat-x #D9D9D9;
color: #333333;
font-size: 12px;
font-weight: bold;
height: 25px;
padding: 0px 6px 4px 6px;
border: 1px solid #C5CBCF;
)
input[name="post"].button2:hover {
background-color: #DDDDDD;
background-image : none;
border: 1px #999999 solid;
}

You jst need to host those 2 background images and link them in the code.

You made a mistake with the code, it didn't take it

input[name="post"].button2 {
background : url(images/bg-2.png) top repeat-x #D9D9D9;
color: #333333;
font-size: 12px;
font-weight: bold;
height: 25px;
padding: 0px 6px 4px 6px;
border: 1px solid #C5CBCF;
)

It should be a }

Thank you so much anikilen! You rock; I really wanted to have those buttons, now they're perfect!

You may lock this now; Thanks and Happy Valentine's!!

I checked them, they look exact. Good job ani
Since this thread appears to be solved, I will lock this thread and mark it as solved.


Sanket

Unlocked as requested by TheListener

Thanks Mario.

Sorry, I forgot to ask. How can I change those button when clicking the Preview buttons? Is it possible?

Thanks :]

You can use this code...

For preview button

Code:

input[name="preview"].button2:hover:focus {
YOUR CSS HERE;
}

For post button

Code:

input[name="post"].button2:hover:focus {
YOUR CSS HERE;
}

Okay, here's the code I'm using for them all:

Code:

/* For preview */
input[name="preview"].button2:hover:focus {
input[name="preview"].button2 {
background : url(images/bg-2.png) top repeat-x #D9D9D9;
color: #333333;
font-weight: bold;
height: 25px;
padding: 0px 6px 4px 6px;
border: 1px solid #C5CBCF;
}
input[name="preview"].button2:hover {
background-color: #DDDDDD;
background-image : none;
border: 1px #999999 solid;
}
}
input[name="post"].button2:hover:focus {
input[name="post"].button2 {
background : url(images/bg-1.png) top repeat-x #5F78AB;
color: #FFFFF0;
font-weight: bold;
padding: 0px 6px 4px 6px;
height: 25px;
border: 1px solid #29457F;
}
input[name="post"].button2:hover {
border:1px #836B40 solid;
background-image : none;
background-color: #4F6AA3;
}
}

Problem is that the "Send" button doesn't work for the preview :| What to do?

I think what The Listener is talking about is when you click Post reply, the SEND button hasn't changed.

@KingOfSports, I already know that

@TheListener,
The code you are using is completely wrong.

Here is a full code that will do everything you want with buttons.

Code:

/* preview button - normal */
input[name="preview"].button2 {
background : url(images/bg-1.png) top repeat-x #5F78AB;
color: #FFFFF0;
font-weight: bold;
padding: 0px 6px 4px 6px;
font-size: 12px;
height: 25px;
border: 1px solid #29457F;
}
/* preview button - on hover */
input[name="preview"].button2:hover {
border:1px #836B40 solid;
background-image : none;
background-color: #4F6AA3;
}
/* preview button - when clicked */
input[name="preview"].button2:hover:focus {
background-color: #4B649A;
background-image: none;
}


/* post button - normal */
input[name="post"].button2 {
background : url(images/bg-2.png) top repeat-x #D9D9D9;
color: #333333;
font-size: 12px;
font-weight: bold;
height: 25px;
padding: 0px 6px 4px 6px;
border: 1px solid #C5CBCF;
}
/* post button - on hover */
input[name="post"].button2:hover {
background-color: #DDDDDD;
background-image : none;
border: 1px #999999 solid;
}
/* post button - when clicked */
input[name="post"].button2:hover:focus {
background-color: #C5C5C5;
background-image: none;
}

Still the same problem; the send button doesn't work when clicking on Preview :|

TheListener wrote:Still the same problem; the send button doesn't work when clicking on Preview :|

Well, the send button will work for send only. How can it work for preview?

I don't get your point

I mean when you click the "Preview" button you're sent to a new window. In that window, the Send button isn't modified; it's default.

Or when you click on New Topic, Advanced Editing, or on Post Reply

It only works for the Quick Reply