The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Changing "Preview" and "Send" buttons with CSS

View previous topic View next topic 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.

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

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

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..

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? ;/

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.

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 :/

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.

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.

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.

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.

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.

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?

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;
}

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?

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;
}

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. =)

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

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

View previous topic View next topic Back to top


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