The button now has a stylish 5px border, making it slightly larger in size. However, it seems

Question

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

How can I add an active class with a 5px border-bottom on a button without increasing the button size by 5px? The box-sizing property is not working for me. Is there a simple solution to achieve this?

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
}

.active {
  border-bottom: 5px solid yellow;
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

html css

Answer 1

Answer №1

When it comes to the border, using box-sizing: border-box will be effective if a fixed height is assigned to the button element.

Approach1 with fixed height

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
  height: 53px;
}

.button.active {
  border-bottom: 5px solid yellow;
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

Approach2 without fixed height(Using :before css pseudo selector)

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
  position: relative;
}

.button.active:before {
  content: "";
  border-bottom: 5px solid yellow;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

Answer 2

When it comes to the border, using box-sizing: border-box will be effective if a fixed height is assigned to the button element.

Approach1 with fixed height

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
  height: 53px;
}

.button.active {
  border-bottom: 5px solid yellow;
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

Approach2 without fixed height(Using :before css pseudo selector)

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
  position: relative;
}

.button.active:before {
  content: "";
  border-bottom: 5px solid yellow;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

Answer 3

Answer №2

So, let me explain why simply adjusting the box-sizing property won't fully solve the issue at hand. When you instruct CSS to apply 20px of padding to both buttons, it complies without hesitation. Then, when you decide to add a 5px border to the active button, CSS once again follows your command. Now, if you want both buttons to appear equal in size, the only way to achieve this is by reducing the padding of the first button. Here's how you can accomplish this:

.active {
  border-bottom: 5px solid yellow;
  padding: calc(20px - 5px);
}

I've utilized the calc() function here to accommodate those utilizing rems or ems as units.

Answer 4

So, let me explain why simply adjusting the box-sizing property won't fully solve the issue at hand. When you instruct CSS to apply 20px of padding to both buttons, it complies without hesitation. Then, when you decide to add a 5px border to the active button, CSS once again follows your command. Now, if you want both buttons to appear equal in size, the only way to achieve this is by reducing the padding of the first button. Here's how you can accomplish this:

.active {
  border-bottom: 5px solid yellow;
  padding: calc(20px - 5px);
}

I've utilized the calc() function here to accommodate those utilizing rems or ems as units.

Answer 5

Answer №3

Method 1: box-shadow

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
}

.active {
  box-shadow: 0 -5px 0 yellow inset
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

Method 2: pseudo-element ::after

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  /* Add Position Relative for Button */
  position: relative;
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
}

.active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: yellow
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

Answer 6

Method 1: box-shadow

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
}

.active {
  box-shadow: 0 -5px 0 yellow inset
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

Method 2: pseudo-element ::after

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  /* Add Position Relative for Button */
  position: relative;
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
}

.active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: yellow
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

Answer 7

Answer №4

How about enhancing the default button style by incorporating a sleek black 5px border and making the active button standout with a vibrant yellow color?

.button {
  background: black;
  border-bottom: 5px solid black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
}

.active {
  border-bottom: 5px solid yellow;
}

Answer 8

How about enhancing the default button style by incorporating a sleek black 5px border and making the active button standout with a vibrant yellow color?

.button {
  background: black;
  border-bottom: 5px solid black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
}

.active {
  border-bottom: 5px solid yellow;
}

Answer 9

Answer №5

From what I gather, it seems like you're looking to add a shadow effect to the button. Applying a shadow to the button is a good idea.

Here's an example:

box-shadow: 10px 10px 5px #aaaaaa;

You can then customize it according to your preference.

Answer 10

From what I gather, it seems like you're looking to add a shadow effect to the button. Applying a shadow to the button is a good idea.

Here's an example:

box-shadow: 10px 10px 5px #aaaaaa;

You can then customize it according to your preference.

Answer 11

Answer №6

To ensure that your button has the correct height, include the height property within the .active class along with box-sizing: border-box. Once you make these adjustments, your button should be good to go! :)

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
}

.active {
border-bottom: 5px solid yellow;
box-sizing: border-box;
height: 55px;
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

Answer 12

To ensure that your button has the correct height, include the height property within the .active class along with box-sizing: border-box. Once you make these adjustments, your button should be good to go! :)

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  border: 2px solid blue;
}

.button {
  background: black;
  width: 150px;
  border: 0;
  padding: 20px;
  margin: 0;
  color: white;
}

.active {
border-bottom: 5px solid yellow;
box-sizing: border-box;
height: 55px;
}

<div class="container">
  <button class="button active">button active</button>
  <button class="button">button</button>
</div>

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Is there a regular expression that can be used to extract sentences from HTML

Transferring a parameter from link_to to a popup window in a Rails application

(HTML)(PHP)Restricting Access to Login Page

Ways to repair an element

A method for expanding the menu upwards to make room for newly added items

Preventing JavaScript from refreshing the page when using location.replace for the second time with the identical URL

Accessing an element by its ID with the help of a looping

The website is failing to adapt properly to smaller screen sizes

What is the best way to target specific text within the DOM without including text within attributes?

Using PHP to nest a table within HTML and populate it with numbers ranging from 1 to 100

how to prevent autoscrolling in an angular application when overflow-x is set to

What events precede and follow a keydown action in a Textarea field?

Is there a way to integrate a Python script or code directly into an HTML document?

The Stripe card element seems to be missing from the form

Stopping individuals from engaging in the act of spamming a picture upload form

Creating a design with multiple `<thead>` and `<tbody>` elements

React does not allow for images to be used as background elements

What are effective methods for testing HTML5 websites?

What is the best way to make changes to the DOM when the state undergoes a

Populate HTML Table with Array Elements