Tips for adding both a border and bottom border to a button

Question

Tips for adding both a border and bottom border to a button

How can I style a button like this example?

Below is my current code:

.button {
  border-color: red;
  border-radius: 8px
}

.button::after {
  content: '';
  background-color: red;
  display: block;
  width: inherit;
  height: 3px;
}

<button class="button">Click me </button>

The issue I'm facing is that the button's width extends to 100% of the screen, but I need it to be the width of the button itself. The challenge is that the button text is dynamic, so I can't specify a fixed width for it.

html css

Answer 1

Answer №1

To ensure that the button does not expand to full width, wrap it in a div with display: inline-block. Additionally, use relative positioning on the div so that it can contain an absolutely positioned element within. To add spacing between the button and the line below as seen in the image, apply some padding to the element. For the :after pseudo-element, make it absolutely positioned and set its width: 100%.

div {
  position: relative;
  padding: .75rem .5rem;
  box-sizing: border-box;
  display: inline-block
}

button {
  background: transparent;
  border-radius: .5rem;
  border: 3px solid #EF544F;
  padding: .5rem;
  color: #EF544F;
  font-weight: 600;
  font-size: 1.2rem
}

button::after {
  content: '';
  background-color: #EF544F;
  display: block;
  position: absolute;
  width: inherit;
  height: 4px;
  width: 100%;
  bottom: 0;
  left: 0;
  border-radius: 999px;
}

<div>
  <button>Click me</button>
</div>

Answer 2

To ensure that the button does not expand to full width, wrap it in a div with display: inline-block. Additionally, use relative positioning on the div so that it can contain an absolutely positioned element within. To add spacing between the button and the line below as seen in the image, apply some padding to the element. For the :after pseudo-element, make it absolutely positioned and set its width: 100%.

div {
  position: relative;
  padding: .75rem .5rem;
  box-sizing: border-box;
  display: inline-block
}

button {
  background: transparent;
  border-radius: .5rem;
  border: 3px solid #EF544F;
  padding: .5rem;
  color: #EF544F;
  font-weight: 600;
  font-size: 1.2rem
}

button::after {
  content: '';
  background-color: #EF544F;
  display: block;
  position: absolute;
  width: inherit;
  height: 4px;
  width: 100%;
  bottom: 0;
  left: 0;
  border-radius: 999px;
}

<div>
  <button>Click me</button>
</div>

Answer 3

Answer №2

It appears to resemble the image displayed:

.button
{
  border-radius: 0.5em;
  padding: 0.4em 0.8em 0.2em 0.8em;
  color: red;
  font-weight: bold;
  border: 2px solid red;
  background-color: transparent;
}

.button::after
{
  content: '';
  background-color:red;
  display: block;
  height: 3px;
  position: relative;
  left: -1.3em;
  bottom: -1em;
  width: calc(100% + 2.6em);
}

<button class="button">Tab Tile</button>

Answer 4

It appears to resemble the image displayed:

.button
{
  border-radius: 0.5em;
  padding: 0.4em 0.8em 0.2em 0.8em;
  color: red;
  font-weight: bold;
  border: 2px solid red;
  background-color: transparent;
}

.button::after
{
  content: '';
  background-color:red;
  display: block;
  height: 3px;
  position: relative;
  left: -1.3em;
  bottom: -1em;
  width: calc(100% + 2.6em);
}

<button class="button">Tab Tile</button>

Answer 5

Answer №3

consider using a "min-width" value

  .button::after{
         content: '';
         background-color:red;
         display: inline-block;
         width: auto;
         height: 3px;
         min-width:100px;  
   }

Answer 6

consider using a "min-width" value

  .button::after{
         content: '';
         background-color:red;
         display: inline-block;
         width: auto;
         height: 3px;
         min-width:100px;  
   }

Tips for adding both a border and bottom border to a button

Answer №1

Answer №2

Answer №3

Similar questions

Employing Modernizr along with jQuery for Animation in Cases when CSS3 Transitions are Absent

Can image data be extracted from a canvas without needing to physically render the canvas?

HTML Element Split in Two by a Line in the Middle

Card Alignment with Bootstrap

Choose a particular element within an element class using a variable as the selector in jQuery

Any advice on how to horizontally center my css slideshow?

Ensuring consistent input width in a table for all columns in reactjs and bootstrap, regardless of their content

Unusual behavior in ReactJS and HTML5 video player observed

The navigation on my mobile collapses whenever I use the Hello bar app

Angular Appreciation Meter

Ways to define the background color of a form group

Issue with $http.get in fetching information from PHP server

Height not being applied to DIV container

What could be the reason for my GitHub Pages site not appearing on the screen?

Images in the center with a div overlay on top

What causes offsetHeight to be less than clientHeight?

The hovering of the mouse over a dropdown menu causes a division on the page to shift

Contrasts between space and the greater than selector

Tips on maintaining the Parent menu in a hovered state when the mouse is over the child menu within a Dropdown Menu

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players