Changing "Preview" and "Send" buttons with CSS

Go down

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

Post by Syfte on 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.
avatar
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 on June 15th 2010, 11:57 pm

Bump. Smile
avatar
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 on June 17th 2010, 1:59 am

Arrow bump
avatar
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 on June 17th 2010, 11:38 pm

Bump..
avatar
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 on 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? ;/
avatar
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 on 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.
avatar
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 on June 18th 2010, 12:53 am

I tried as much as I can do Syfte but I couldn't do it :/
avatar
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 on June 19th 2010, 1:18 am

Alright, that's fine, thanks.

Still looking.
avatar
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 on June 20th 2010, 6:45 pm

Bump.
avatar
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 on 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.
avatar
ankillien
Energetic

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

http://www.webartzforum.com/

Back to top Go down

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

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

Just to switch the image to a different one.
avatar
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 on June 22nd 2010, 2:58 am

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

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

http://www.webartzforum.com/

Back to top Go down

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

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

Hmm..alright. Thanks.

Can you make the background rounded?
avatar
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 on 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;
}
avatar
ankillien
Energetic

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

http://www.webartzforum.com/

Back to top Go down

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

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

It worked fine, thanks. Can you do it for the preview button and quick reply?
avatar
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 on 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;
}
avatar
ankillien
Energetic

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

http://www.webartzforum.com/

Back to top Go down

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

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

Thanks. =)
avatar
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 on June 23rd 2010, 9:52 pm

Solved => Locked
avatar
MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1837
Language : test

http://test.com

Back to top Go down

Back to top


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