CODEWITHSUNDEEP
htmlcss
chenaren
chenaren

Reputation: 2258

Make button width fit to the text

While I was fiddling with this 'Fancy 3D Button' example, I found that the width seemed to be hard-coded to fit the text's width.

Here is the HTML / CSS:

body {
  background-image: url(http://subtlepatterns.com/patterns/ricepaper.png)
}
a {
  position: relative;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  background-color: rgba(219, 87, 5, 1);
  font-family: 'Yanone Kaffeesatz';
  font-weight: 700;
  font-size: 3em;
  display: block;
  padding: 4px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  margin: 100px auto;
  width: 160px;
  text-align: center;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}
a:active {
  -webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  -moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  position: relative;
  top: 6px;
}
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>

<a href="javascript:void(0);">Push me!</a>

Normal look

If I remove the width property, the button would fill the page width.

Without the width property

Is there any way to make the button's width fit to the text, automatically?

Upvotes: 74

Views: 235680

Answers (11)

Vu Viet Hung
Vu Viet Hung

Reputation: 330

I do not see anyone mention about this solution: margin: auto; elements inside a display: flex; parent. Here just add display: flex; to the body:

a {
  position: relative;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  background-color: rgba(219, 87, 5, 1);
  font-family: 'Yanone Kaffeesatz';
  font-weight: 700;
  font-size: 3em;
  display: block;
  padding: 4px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  margin: 100px auto;
  text-align: center;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}
body {
 display: flex;
}
<body>
    <a href="javascript:void(0);">Push me!</a>
</body>

Upvotes: 0

Anirudh Singh
Anirudh Singh

Reputation: 31

This seems to solve the issue:

display: inline-block;
width: auto;

Upvotes: 3

Quang Duy L&#234;
Quang Duy L&#234;

Reputation: 1

Try add width: 100% for tag button

Upvotes: 0

Aleks
Aleks

Reputation: 984

If you are aiming for maximum browser support, modern approach is to place button in a div with display:flex; and flex-direction:row; The same trick will work for height with flex-direction:column; or both height and width(will require 2 divs)

Upvotes: 2

Matt Wyndham
Matt Wyndham

Reputation: 391

I like Roger Cruz's answer of:

width: fit-content;

and I just want to add that you can use

padding: 0px 10px;

to add a nice 10px padding on the right and left side of the text in the button. Otherwise the text would be right up along the edge of the button and that wouldn't look good.

Upvotes: 14

Roger Cruz
Roger Cruz

Reputation: 1001

If you are developing to a modern browser. https://caniuse.com/#search=fit%20content

You can use:

width: fit-content;

Upvotes: 87

David Huynh Magic Man
David Huynh Magic Man

Reputation: 77

Pretty late and not sure if this was available when the question was asked, set width: auto;

Seems to do the trick

Upvotes: 6

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

Keeping the element's size relative to its content can also be done with display: inline-flex and display: table

The centering can be done with..

  • text-align: center; on the parent (or above, it's inherited)

  • display: flex; and justify-content: center; on the parent

  • position: absolute; left: 50%; transform: translateX(-50%); on the element with position: relative; (at least) on the parent.

Here's a flexbox guide from CSS Tricks

Here's an article on centering from CSS Tricks.

Keeping an element only as wide as its content..

  • Can use display: table;

  • Or inline-anything including inline-flex as used in my snippet example below.

Keep in mind that when centering with flexbox's justify-content: center; when the text wraps the text will align left. So you will still need text-align: center; if your site is responsive and you expect lines to wrap.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}
.container {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
  height: 50%;
}
.container.c1 {
  text-align: center; /* needed if the text wraps */
  /* text-align is inherited, it can be put on the parent or the target element */
}
.container.c2 {
 /* without text-align: center; */
}
.button {
  padding: 5px 10px;
  font-size: 30px;
  text-decoration: none;
  color: hsla(0, 0%, 90%, 1);
  background: linear-gradient(hsla(21, 85%, 51%, 1), hsla(21, 85%, 61%, 1));
  border-radius: 10px;
  box-shadow: 2px 2px 15px -5px hsla(0, 0%, 0%, 1);
}
.button:hover {
  background: linear-gradient(hsl(207.5, 84.8%, 51%), hsla(207, 84%, 62%, 1));
  transition: all 0.2s linear;
}
.button.b1 {
    display: inline-flex; /* element only as wide as content */
}
.button.b2 {
    display: table; /* element only as wide as content */
}
<div class="container c1">
  <a class="button b1" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Before And After Wrap</a>
</div>
<div class="container c2">
  <a class="button b2" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Only Before Wrap</a>
</div>

Fiddle

https://jsfiddle.net/Hastig/02fbs3pv/

Upvotes: 4

krishna
krishna

Reputation: 11

just add display: inline-block; property and removed width.

Upvotes: 1

Mai
Mai

Reputation: 338

Try to add display:inline; to the CSS property of a button.

Upvotes: 1

Natsu
Natsu

Reputation: 2165

Remove the width and display: block and then add display: inline-block to the button. To have it remain centered you can either add text-align: center; on the body or do the same on a newly created container.

The advantage of this approach (as opossed to centering with auto margins) is that the button will remain centered regardless of how much text it has.

Example: http://cssdeck.com/labs/2u4kf6dv

Upvotes: 46

Related Questions