CSS button that wraps text, is centered and adjusts width to text?

Question

I have a CSS button that I wish that wraps text (to make it responsive on mobile), is centered and adjusts width to text. How do I do that? What I currently have does wrap text and is adjusted to center but the width does not adjust to text (it is max width regardless of length of text).

.greenbuttonCTA{
    font-size:18px;
    background-color:#3f8723;
    border:1px solid white;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-weight:bold;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
    text-shadow:0px -1px 0px #7a2a1d;
    text-align:center !important;
      display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.greenbuttonCTA:hover {
    background-color:#5dad3e;
}
.greenbuttonCTA:active {
    position:relative;
    top:1px;
}

<a href="#" class="greenbuttonCTA">test test test test test test test test test test test test test test test test</a>

score 1 · Answer 1 · answered Mar 09 '22 at 21:19

Add width: fit-content; to a. This way the width will be determined by the amount of text. Then you can set margin: auto; to re-center it.

.greenbuttonCTA {
  font-size: 18px;
  background-color: #3f8723;
  border: 1px solid white;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-weight: bold;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  text-shadow: 0px -1px 0px #7a2a1d;
  text-align: center !important;
  display: block !important;
}

.greenbuttonCTA:hover {
  background-color: #5dad3e;
}

.greenbuttonCTA:active {
  position: relative;
  top: 1px;
}

a {
  width: fit-content;
  margin: auto;
}

<a href="#" class="greenbuttonCTA">test test test test test test test test test test test test test test test test</a>

CSS button that wraps text, is centered and adjusts width to text?

1 Answers1