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

What are some strategies for increasing my website's mobile responsiveness?

Code that changes every occurrence of a particular filtered selection of HREF values to a different value

The dimensions of the HTML table do not adjust properly when new items are being appended using JavaScript

What is the process for displaying a PHP array in HTML5 audio and video players?

jscrollpane does not work properly in Firefox, but it functions correctly in Chrome

Detecting collisions using CSS animation

Unable to post form data into database due to Javascript undefined data situation

Understanding the relationship between CSS height and line-height can help developers create more

Is there a white outline on the Cordova Text Font?

Animate the service item with jQuery using slide toggle effect

Regular expression that removes attributes from all HTML tags except <a>

When it comes to Shopify Schema, the section settings are functional within the <style> tag, whereas the block settings do not seem to have the same

Switching up the image using a dropdown selection menu

Is there a way to display .form-check-inline buttons on a different line than their corresponding label?

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

show textboxes positioned in the middle of a slanted rectangle

The NVD3 chart embedded in a React application generates HTML elements that persist on the page indefinitely without fading away

The battle of line-height versus padding for achieving vertical centering with one-lined text

Place two divs side by side with the second div filling up the remaining space on the line

PHP time counting script