The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Changing "Preview" and "Send" buttons with CSS

4 posters

Go down

Solved Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 15th 2010, 12:00 am

Hi.

I've been wondering if you can change the "preview" and "send" buttons to your own images (using CSS).

I found this topic with a similar purpose, but all I could do with it was make my own image appear over the button in the code.
So is there a code that just replaces the "preview" and "send" buttons with new ones?

(If not, how about a code for rounded edges on them?)
Thanks in advance.
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 15th 2010, 11:57 pm

Bump. Smile
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 17th 2010, 1:59 am

Arrow bump
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 17th 2010, 11:38 pm

Bump..
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by MrMega June 18th 2010, 12:17 am

Code:
/* post button - normal */
input[name="post"].button1 {
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"].button1:hover {
background-color: #DDDDDD;
background-image : none;
border: 1px #999999 solid;
}
/* post button - when clicked */
input[name="post"].button1:hover:focus {
background-color: #C5C5C5;
background-image: none;
}

Why didn't you just ask me on Fuji? ;/
MrMega
MrMega
Forumember

Male Posts : 981
Reputation : 11
Language : English, Polish, HTML, BBCode
Location : New York, United States

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 18th 2010, 12:19 am

Haha, well I didn't think of that..
Anyway, testing it.

EDIT: Well, it pretty much gave me the same effect. I don't need the hover.
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by MrMega June 18th 2010, 12:53 am

I tried as much as I can do Syfte but I couldn't do it :/
MrMega
MrMega
Forumember

Male Posts : 981
Reputation : 11
Language : English, Polish, HTML, BBCode
Location : New York, United States

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 19th 2010, 1:18 am

Alright, that's fine, thanks.

Still looking.
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 20th 2010, 6:45 pm

Bump.
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by ankillien June 21st 2010, 3:40 am

Hello,

What exactly you want to do with the buttons?
You can add a background image, borders, hover effect etc.
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 21st 2010, 9:48 pm

Just to switch the image to a different one.
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by ankillien June 22nd 2010, 2:58 am

You can't convert the button into an image, you can just add a background to it.
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 22nd 2010, 3:09 am

Hmm..alright. Thanks.

Can you make the background rounded?
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by ankillien June 22nd 2010, 5:04 am

Not sure, but try this code...

Code:
input[name="post"].button1 {
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
}
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 22nd 2010, 10:06 pm

It worked fine, thanks. Can you do it for the preview button and quick reply?
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by ankillien June 23rd 2010, 6:35 pm

This code would help...

Code:
input[name="post"] , input[name="preview"] {
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
}
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by Syfte June 23rd 2010, 9:03 pm

Thanks. =)
Syfte
Syfte
Forumember

Male Posts : 87
Reputation : 15
Language : English | Tagalog | HTML | CSS | Graphic Design

http://www.spotfeed.net

Back to top Go down

Solved Re: Changing "Preview" and "Send" buttons with CSS

Post by MrMario June 23rd 2010, 9:52 pm

Changing "Preview" and "Send" buttons with CSS Solved10Solved => Locked
MrMario
MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1839
Language : test

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum