/    Sign up×
Community /Pin to ProfileBookmark

Rounded Form Button Corners

Copy linkTweet thisAlerts:
Nov 01.2005

Sorry for the noobie question. I’m sure this is a very simple question but I can’t find the answer myself.

The button used in this forum and many other places has rounded corners and a 3D effect but I can’t work out how to achieve that. The css doesn’t seem to have anything that would create the effect.

Can someone please put me out of my misery?

[upl-file uuid=98e527ca-63ad-40ce-b81e-b3fa92a0cabf size=5kB]button.gif[/upl-file]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYNov 01.2005 — It's the default Windows XP thing,

you could fake it with a background graphic maybe
Copy linkTweet thisAlerts:
@jogolNov 01.2005 — the buttons in this forum are graphics.

<input type="image" src="graphics/reply.gif" height="20" width="60" border="0" alt="Post Reply">

but you can style form buttons and other form elements with css, too.

http://www.456bereastreet.com/lab/form_controls/buttons/

http://www.456bereastreet.com/archive/200409/styling_form_controls/
Copy linkTweet thisAlerts:
@Old-FriendauthorNov 01.2005 — I dont really understand,

http://www.456bereastreet.com/lab/form_controls/buttons/

Button number 1 hais rounded corners, {color:#00f;}

But Button number 2 has square corners, {background-color:#ddd;}

How can a different background color be used, but retain the rounded corners?
Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYNov 01.2005 — you can't,

you would have to use an image
Copy linkTweet thisAlerts:
@Old-FriendauthorNov 01.2005 — OK. Thanks for the reply.
Copy linkTweet thisAlerts:
@jogolNov 01.2005 — the look of a button styled with css is dependant on the os and browser it is viewed with.

from the [URL=http://www.456bereastreet.com/lab/form_controls/buttons/]page[/URL]:

As you can see, the results vary a lot between browsers and operating systems.[/QUOTE]
Copy linkTweet thisAlerts:
@Old-FriendauthorNov 01.2005 — Every OS and every browser only seem to be consistent in their inconsistancies...
×

Success!

Help @Old-Friend spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...