Hacer que el ancho del botón se ajuste al texto.

Mientras jugueteaba con este ejemplo del ‘Botón 3D Fancy’ , descubrí que el width parecía estar codificado para que se ajustara al ancho del texto.

Aquí está el 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; } 
  Push me! 

Aspecto normal

Si elimino la propiedad de width , el botón llenaría el ancho de la página.

Sin la propiedad de ancho

¿Hay alguna manera de hacer que el ancho del botón se ajuste al texto, automáticamente?

Elimine el ancho y display: block y luego agregue display: inline-block en display: inline-block al botón. Para mantenerlo centrado, puede agregar text-align: center; en el body o hacer lo mismo en un contenedor de nueva creación.

La ventaja de este enfoque (como se muestra al centrado con márgenes automáticos) es que el botón permanecerá centrado independientemente de la cantidad de texto que tenga.

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

Bastante tarde y no estoy seguro de si estaba disponible cuando se hizo la pregunta, establecer el width: auto;

Parece funcionar

Mantener el tamaño del elemento en relación con su contenido también se puede hacer con display: inline-flex y display: table

El centrado se puede hacer con ..

  • text-align: center; en el padre (o superior, se hereda)

  • display: flex; y justify-content: center; en el padre

  • position: absolute; left: 50%; transform: translateX(-50%); sobre el elemento con posición: relativo; (Al menos) en el padre.

Aquí hay una guía de flexbox de CSS Tricks

Aquí hay un artículo sobre el centrado de CSS Tricks.

Manteniendo un elemento tan amplio como su contenido.

  • Puede usar display: table;

  • O en línea, cualquier cosa, incluyendo inline-flex como se usa en el siguiente fragmento de código.

Tenga en cuenta que al centrarse con el justify-content: center; de flexbox justify-content: center; cuando el texto se ajusta el texto se alineará a la izquierda. Así que todavía necesitarás text-align: center; Si su sitio es receptivo y espera que las líneas se ajusten.

  • Más ejemplos en esta stack de respuestas
 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 */ } 
   

Intente añadir display:inline; a la propiedad CSS de un botón.

solo agrega display: inline-block; Propiedad y ancho eliminado.