Changing "Preview" and "Send" buttons with CSS
4 posters
Page 1 of 1
Changing "Preview" and "Send" buttons with CSS
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.
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.
Re: Changing "Preview" and "Send" buttons with CSS
- 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
- Posts : 981
Reputation : 11
Language : English, Polish, HTML, BBCode
Location : New York, United States
Re: Changing "Preview" and "Send" buttons with CSS
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.
Anyway, testing it.
EDIT: Well, it pretty much gave me the same effect. I don't need the hover.
Re: Changing "Preview" and "Send" buttons with CSS
I tried as much as I can do Syfte but I couldn't do it
MrMega- Forumember
- Posts : 981
Reputation : 11
Language : English, Polish, HTML, BBCode
Location : New York, United States
Re: Changing "Preview" and "Send" buttons with CSS
Hello,
What exactly you want to do with the buttons?
You can add a background image, borders, hover effect etc.
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
Re: Changing "Preview" and "Send" buttons with CSS
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
Re: Changing "Preview" and "Send" buttons with CSS
Hmm..alright. Thanks.
Can you make the background rounded?
Can you make the background rounded?
Re: Changing "Preview" and "Send" buttons with CSS
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
Re: Changing "Preview" and "Send" buttons with CSS
It worked fine, thanks. Can you do it for the preview button and quick reply?
Re: Changing "Preview" and "Send" buttons with CSS
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
Re: Changing "Preview" and "Send" buttons with CSS
Solved => Locked |
MrMario- Helper
- Posts : 22186
Reputation : 1839
Language : test
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum