im trying to put a border in a button, i tried to create 2 div and then do display: inline-block but it doesnt work, here is my code: css:

`#vid{
    position: absolute;
    width: 95px;
    height: 60px;
    background-color: #ffff;
    border: #ffff;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;

}

#h5-vid{
border-radius: 25px;
background: #ffff;
border-color: black;   
display: inline-block;
}

html: <button id="vid"><p>Videos</p><div id="h5-vid"><h5 id="h5-text-vid">New!</h5></button></div>

[This is what i want to get][1]

[This is what i got][2] [1]: https://i.stack.imgur.com/63B2x.png [2]: https://i.stack.imgur.com/oBm9B.png

CodePudding user response：

Put both elements with text inside the button:

<button id="vid">
  <p>Videos</p>
  <h5 id="h5-text-vid">NEW</h5>
</button>

Use display: flex; with justify and align center for the button then simply add border to the h5 element using border: solid 1px black;

Here is a working snippet:

#vid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 95px;
  height: 60px;
  background-color: #ffff;
  border: none;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
}

#h5-text-vid {
  border: solid 1px black;
  border-radius: 25px;
  padding: 3px;
  font-size: 6pt;
  font-weight: 800;
}

body {
  /* Just for demo */
  background-color: gray;
}

<button id="vid">
  <p>Videos</p>
  <h5 id="h5-text-vid">NEW</h5>
</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Your code didn't work because p tag is block element.
And also p and h5 tag has margin-block-start and margin-block-end.
So I removed those margins, and set display: inline-block to p tag.
Now, it works.

Note: You set border-color to div#h5-vid, but didn't work because div doesn't have border in default.
So I changed it as border: 1px solid black.

p, h5 {
  margin-block-start: 0;
  margin-block-end: 0;
  display: inline-block;
}
#vid{
  position: absolute;
  width: 95px;
  height: 60px;
  background-color: #fff;
  border: #fff;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
}

#h5-vid{
  border-radius: 25px;
  background: #fff;
  border: 1px solid black; 
  display: inline-block;
  margin-left: 5px;
  padding: 0 3px;
}

<button id="vid"><p>Videos</p><div id="h5-vid"><h5 id="h5-text-vid">New!</h5></div></button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>