Text followed by a centered button with dashes (separator) around it

user_809240 0
Viewed 47

I'm trying to get some text followed by a centered button that's surrounded by dashes on both sides of it (takes up whole line).

It should look something like this:

Some text ------------------ Centered Button -------------------

I do not want to hardcore the number of "-", it should take up the whole line (so equal number of dashes on both sides of the button).

This is what I have so far, but I can't get the text to show up on the same line: https://jsfiddle.net/5wd7jtmc

Any pointers?

css html
1 Answers

By using flex-box. I surrounded with a container and assign them dispaly:flex. Then i put a wrapper around the button to separate the line a bit from the button. but you can also delete it or change the spacing (padding).

.dashedButton {
  border-bottom: 1px dashed #000;
  text-align: center;
  height: 10px;  
  width:100%
}

.leftText {
  flex-basis: 5%;   
}

.wrapper {
  display: flex;
  gap: 1rem;
}

.button-wrapper {
  background: #fff;
  display: inline;
  padding: 20px;
}
<div class="wrapper">
  <div class="leftText">
  StartHere
  </div>
  <div class="dashedButton">
    <div class="button-wrapper">
      <button type="button">Click Me!</button>
    </div>
  </div>
</div>

user_148071110
Related