/    Sign up×
Community /Pin to ProfileBookmark

button style

Copy linkTweet thisAlerts:
Apr 10.2004

hello

how can i create a new button with a certain background, text and no border?

i need a bordless textfield as well..

TNX!

to post a comment
CSS

19 Comments(s) ↴

Copy linkTweet thisAlerts:
@SamApr 10.2004 — use this css
[code=php]
.buttons{
border:0px none;
background:green;
}
.inputtext{
border:0px none;
}
[/code]
and this html
[code=php]
<button class="buttons">text</button>
<input type="text" class="inputtext" />
[/code]
Copy linkTweet thisAlerts:
@JonaApr 10.2004 — [font=arial]You might want white text, instead of the default (usually black) text, if the background is green. Just a thought. ? [/font]
Copy linkTweet thisAlerts:
@Ben_RogersApr 10.2004 — You can also use input[type="text"] instead of inputtext, and then you get to leave out the class.
Copy linkTweet thisAlerts:
@SamApr 10.2004 — note that that is a CSS 3 selector, thus won't work in IE
Copy linkTweet thisAlerts:
@Paul_JrApr 10.2004 — Actually it's only a [URL=http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors]CSS 2 attribute selector[/URL]. ?

However, IE still doesn't recognize it. :rolleyes:
Copy linkTweet thisAlerts:
@SamApr 11.2004 — My mistake
Copy linkTweet thisAlerts:
@Ben_RogersApr 11.2004 — Ah. My mistake. I didn't test it in IE soo... I din't know. Sorry...
Copy linkTweet thisAlerts:
@adi_nauthorApr 11.2004 — [i]Originally posted by samij586 [/i]

[B]use this css

[code=php]
.buttons{
border:0px none;
background:green;
}
.inputtext{
border:0px none;
}
[/code]
and this html
[code=php]
<button class="buttons">text</button>
<input type="text" class="inputtext" />
[/code] [/B][/QUOTE]

First of all THANKS!

but i dont seem to understand, this will work on IE or not?
Copy linkTweet thisAlerts:
@Paul_JrApr 11.2004 — [i]Originally posted by adi_n [/i]

[B]First of all THANKS!

but i dont seem to understand, this will work on IE or not? [/B][/QUOTE]
Yes, it will work in IE.
Copy linkTweet thisAlerts:
@adi_nauthorApr 11.2004 — i need more assitance ?

look on the left

http://www.g-spot.co.il/index2.html

the "btn" text should be bold, and the text-area should have a 2px #97B4C1 border (same size with the button)

[code=php]
.buttons{
border:1px none;
background:#97B4C1;
color:#F4F4F4;
}
.inputtext{
border:2px #97B4C1;
background:#F4F4F4;
}
[/code]

[code=php]
<input type="submit" value="btn" class="buttons" >&nbsp;<input type="text"

class="inputtext">
[/code]
Copy linkTweet thisAlerts:
@SamApr 11.2004 — [code=php].buttons{
border:1px none;
background:#97B4C1;
color:#F4F4F4;
font-weight:bold;
}
.inputtext{
border:2px solid #97B4C1;
background:#F4F4F4;
}
[/code]
the problems: border's won't show up unless they have a type defined (solid, dashed, etc.) and you had nothing in your styles telling the button text to be bold
Copy linkTweet thisAlerts:
@adi_nauthorApr 11.2004 — Perfect! thenks for your fast reply.

last question, how can i change the buttons [B]font face and font size[/B] , and, as well, how can i limit the text width and button width?
Copy linkTweet thisAlerts:
@JonaApr 11.2004 — [font=arial]Use the properties mentioned, and use the MAXLENGTH attribute in the text INPUT.[/font]

[font=monospace]

.buttons {

font-family: arial, sans-serif;

font-size: small;

width: 70%;

}

[/font]
Copy linkTweet thisAlerts:
@adi_nauthorApr 12.2004 — thanks dude!
Copy linkTweet thisAlerts:
@JonaApr 12.2004 — [font=arial]Piece of CSS (Cake - super style ?).[/font]
Copy linkTweet thisAlerts:
@Ben_RogersApr 12.2004 — Was the super style neccesarry?
Copy linkTweet thisAlerts:
@SamApr 12.2004 — of course it was... otherwise it would just be a piece of C (incase you just mised the joke: [b]C[/b]ake - [b]S[/b]uper [b]S[/b]tyle)
Copy linkTweet thisAlerts:
@Ben_RogersApr 12.2004 — Apparently, I did miss the joke. Super cake. Nice.
Copy linkTweet thisAlerts:
@JonaApr 12.2004 — [font=arial]LOL! ? [/font]
×

Success!

Help @adi_n 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 6.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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...