[Face9000]

So guys, i need some help with css. I made a button which outputs in the button the text that the user wrote.

Ex: I write "hi" in the text form and the button will output "hi".

This is the css code:

Код:

<style type="text/css">
.classname {
	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
	box-shadow:inset 0px 1px 0px 0px #f5978e;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f) );
	background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
	background-color:#f24537;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	border:1px solid #d02718;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	font-style:normal;
	height:25px;
	line-height:25px;
	width:154px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #810e05;
}
.classname:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537) );
	background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
	background-color:#c62d1f;
}.classname:active {
	position:relative;
	top:1px;
}</style>

The problem is: I made a button with a static width/height, so if i type a long text i will come up in this:

http://s2.postimg.org/z23ch8x7d/kik.jpg

See? The text is going out of the button, i wanna adapt it on what user writes..

My question is: How i can enlarge/make more small the button depending on what user types?

I mean, i wanna make the button dynamic, if i write a long text button should adapt at the lenght of the text and viceversa.

Any help?

[Vince]

First of all, remove all this nonsense -moz and -webkit prefixes, border-radius is officially supported in CSS3. Also use linear-gradient for background-color. Thirdly, you may want to change width to min-width, although I don't really see a reason why you would want to set a fixed width.

[Face9000]

Oh, finally lol. Thank you admin

[Cookland]

Quote:

Originally Posted by Face9000 Oh, finally lol. Thank you admin

He's not an admin, he's just extremely clever with things like this topic.

[Vince]

Ha thanks. I just happen to know a lot about these things because they're in my field of study (programmer/webdev [though mostly back-end]) and they interest me.

[Cookland]

Quote:

Originally Posted by Vince Ha thanks. I just happen to know a lot about these things because they're in my field of study (programmer/webdev [though mostly back-end]) and they interest me.

Did you study at school/college? Just curious cos it's something I've been interested in.

[Kaperstone]

Quote:

Originally Posted by Cookland Did you study at school/college? Just curious cos it's something I've been interested in.

If you're interested in learning CSS and HTML, then the answer for "do I really need to go to school, be a super nerd and learn all this shit there ?" is no.
CSS and HTML are easy to understand, once you get the trick, the rest will flow like the waves.

[Potassium]

Quote:

Originally Posted by Kaperstone If you're interested in learning CSS and HTML, then the answer for "do I really need to go to school, be a super nerd and learn all this shit there ?" is no. CSS and HTML are easy to understand, once you get the trick, the rest will flow like the waves.

Agreed. I'm pretty terrible at just about everything I've ever tried to do, but I learned HTML and CSS on my own so if I can do it then literally anyone in the world can :P I actually learned it years ago by making themes for MySpace lol so I'm not really sure what the best way to learn it these days is. Maybe follow some tutorials to make a very basic website - not a website that you will use, just one that you will practice on, to see what different elements of code do

[zT KiNgKoNg]

Quote:

Originally Posted by Potassium Agreed. I'm pretty terrible at just about everything I've ever tried to do, but I learned HTML and CSS on my own so if I can do it then literally anyone in the world can :P I actually learned it years ago by making themes for MySpace lol so I'm not really sure what the best way to learn it these days is. Maybe follow some tutorials to make a very basic website - not a website that you will use, just one that you will practice on, to see what different elements of code do

I managed to figure everything out on my own, just because he's learning all of this doesn't mean he knows more or less than us.... You have more of an advantage going to a class and learning than sitting on your ass at home and reading stuff or watching stuff on the web. I did Games Development in collage (UK that is), I never became a designer or programmer for a AAA Ips, I decided to work freelance in Software Engineering and then work for a company. Just because someone has an interest in learning via school/collage/university doesn't mean they're any better than people who learn via the web.

Either way sometimes interest is a good thing, but just learning one thing isn't always the best idea. After all I've said what I did, never bothered learning anything else while I was in collage, and I'm not in the line of work that I wanted to do when I was 16, plans changes and so do lives.

- Don't ask Its late, and I wanted to rant (DON'T JUDGE ME :/)

[BroZeus]

To achieve it change width property to following and add padding to make a little space between button border and text.
Use this code :

Код:

width: auto;
padding: 2px 5px;

Demo - http://jsfiddle.net/mt5fs339/
Edit the text in html section in demo and press Ctrl + Enter to see the result