Adjusting the size of a button in HTML and CSS

Question

Adjusting the size of a button in HTML and CSS

Check out this code:

/* custom button */
*, *:after, *:before {
  box-sizing: border-box;
}
.checkbox {
  position: relative;
  display: inline-block;
}
.checkbox:after, .checkbox:before {
  font-family: FontAwesome;
  font-feature-settings: normal;
  -webkit-font-kerning: auto;
          font-kerning: auto;
  font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;     
}
.checkbox label {
  width: 90px;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
}
.checkbox label:after {
  content: '';
  position: absolute;
  width: 50px;
  border-radius: 100%;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.checkbox input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.checkbox input:checked + label:after {
  left: 40px;
}

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 42px; /*This line does not affect the height*/
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
}
.model-7 .checkbox input:checked + label {
  border-color: #04c6db;
}
.model-7 .checkbox input:checked + label:after {
  background: #04c6db;
  left: 50px;
}

<div class="model-7">
  <div class="checkbox">
    <input type="checkbox">
    <label></label>
  </div>
</div>

Looking to customize the height of the toggle button? The challenge lies in finding the right element in the CSS that controls the height. Despite attempts to adjust the height property in the .checkbox label section, the desired changes are not reflected. Any insights on how to effectively manage the height aspect of the button design?

javascript html css animation

Answer 1

Answer №1

Altering the label and its ::after pseudo-element height will adjust the size of the toggle button

/* customize toggle button appearance */
*, *:after, *:before {
  box-sizing: border-box;
}

/*=====================*/
.checkbox {
  position: relative;
  display: inline-block;
}
.checkbox:after, .checkbox:before {
  font-family: FontAwesome;
  font-feature-settings: normal;
  -webkit-font-kerning: auto;
          font-kerning: auto;
  font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
}
.checkbox label {
  width: 90px;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
}
.checkbox label:after {
  content: '';
  position: absolute;
  width: 50px;
  border-radius: 100%;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.checkbox input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.checkbox input:checked + label:after {
  left: 40px;
}

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 30px;
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
}
.model-7 .checkbox input:checked + label {
  border-color: #04c6db;
}
.model-7 .checkbox input:checked + label:after {
  background: #04c6db;
  left: 50px;
}

<div class="model-7">
  <div class="checkbox">
    <input type="checkbox" >
    <label></label>
  </div>
</div>

Answer 2

Altering the label and its ::after pseudo-element height will adjust the size of the toggle button

/* customize toggle button appearance */
*, *:after, *:before {
  box-sizing: border-box;
}

/*=====================*/
.checkbox {
  position: relative;
  display: inline-block;
}
.checkbox:after, .checkbox:before {
  font-family: FontAwesome;
  font-feature-settings: normal;
  -webkit-font-kerning: auto;
          font-kerning: auto;
  font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
}
.checkbox label {
  width: 90px;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
}
.checkbox label:after {
  content: '';
  position: absolute;
  width: 50px;
  border-radius: 100%;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.checkbox input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.checkbox input:checked + label:after {
  left: 40px;
}

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 30px;
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
}
.model-7 .checkbox input:checked + label {
  border-color: #04c6db;
}
.model-7 .checkbox input:checked + label:after {
  background: #04c6db;
  left: 50px;
}

<div class="model-7">
  <div class="checkbox">
    <input type="checkbox" >
    <label></label>
  </div>
</div>

Answer 3

Answer №2

After utilizing Chrome to inspect the code, I made modifications to the .model-7 .checkbox label and model-7 .checkbox label:after, successfully adjusting the height of the button. By implementing the code below, the button appeared larger. It is possible to fine-tune the animation once the desired size is set.

Custom CSS

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 62px;
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 5px;
  left: 5px;
  width: 40px;
  height: 40px;
}

Answer 4

After utilizing Chrome to inspect the code, I made modifications to the .model-7 .checkbox label and model-7 .checkbox label:after, successfully adjusting the height of the button. By implementing the code below, the button appeared larger. It is possible to fine-tune the animation once the desired size is set.

Custom CSS

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 62px;
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 5px;
  left: 5px;
  width: 40px;
  height: 40px;
}

Answer 5

Answer №3

Here is how I plan to proceed...

szW.value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--szW'))
szH.value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--szH'))

document.querySelectorAll('input[type=range]').forEach(r=>r.oninput=_=>
  {
  r.closest('label').dataset.val = r.value
  document.documentElement.style.setProperty(`--${r.id}`, `${r.value}px`)
  })

:root {
  --szW : 90px;
  --szH : 40px;
  --szB : 5px;    
  }
  
body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
*, *:after, *:before {
  box-sizing : border-box;
  }

input[type=checkbox].model-8 {
  display: none;
}
input[type=checkbox].model-8 + label {
  position      : relative;
  display       : inline-block;
  width         : var(--szW);
  height        : var(--szH);
  border        : var(--szB) solid #555555;
  border-radius : calc( var(--szH) / 2 );
  transition    : 0.4s;
  }
input[type=checkbox].model-8 + label::before {
  position         : absolute;
  top              : 1.5px;   
  left             : 1.5px;
  display          : block;
  content          : ' ';
  width            : calc( var(--szH) - ( var(--szB) * 2 ) - 3px);
  height           : calc( var(--szH) - ( var(--szB) * 2 ) - 3px);
  border-radius    : 50%;
  background-color : #555555;
  transition       : 0.4s;
  }
input[type=checkbox].model-8:checked + label {
  border-color : #04c6db;
  }
input[type=checkbox].model-8:checked + label::before {
  left             : calc( var(--szW) -  var(--szH) + 1.5px );
  background-color : #04c6db;
  }

/******************************/
label.rg input {
  vertical-align : middle;
  width          : 300px;
  }
label.rg::after {
  content : attr(data-val) 'px';
  }
label.rg::before {
  display : inline-block;
  width   : 3.3em;
  content : attr(data-lib);
  }

<h3>make your sizing</h3>
<label class="rg" data-val="90" data-lib="width :"><input type="range" id="szW"  min="40" max="200" step="10" value="90"></label> <br>
<label class="rg" data-val="40" data-lib="height :"><input type="range" id="szH" min="30" max="80" step="5" value="40"></label> <br>

<hr>
<br>
<input type="checkbox" id="m8" class="model-8" ><label for="m8"></label>

Answer 6

Here is how I plan to proceed...

szW.value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--szW'))
szH.value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--szH'))

document.querySelectorAll('input[type=range]').forEach(r=>r.oninput=_=>
  {
  r.closest('label').dataset.val = r.value
  document.documentElement.style.setProperty(`--${r.id}`, `${r.value}px`)
  })

:root {
  --szW : 90px;
  --szH : 40px;
  --szB : 5px;    
  }
  
body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
*, *:after, *:before {
  box-sizing : border-box;
  }

input[type=checkbox].model-8 {
  display: none;
}
input[type=checkbox].model-8 + label {
  position      : relative;
  display       : inline-block;
  width         : var(--szW);
  height        : var(--szH);
  border        : var(--szB) solid #555555;
  border-radius : calc( var(--szH) / 2 );
  transition    : 0.4s;
  }
input[type=checkbox].model-8 + label::before {
  position         : absolute;
  top              : 1.5px;   
  left             : 1.5px;
  display          : block;
  content          : ' ';
  width            : calc( var(--szH) - ( var(--szB) * 2 ) - 3px);
  height           : calc( var(--szH) - ( var(--szB) * 2 ) - 3px);
  border-radius    : 50%;
  background-color : #555555;
  transition       : 0.4s;
  }
input[type=checkbox].model-8:checked + label {
  border-color : #04c6db;
  }
input[type=checkbox].model-8:checked + label::before {
  left             : calc( var(--szW) -  var(--szH) + 1.5px );
  background-color : #04c6db;
  }

/******************************/
label.rg input {
  vertical-align : middle;
  width          : 300px;
  }
label.rg::after {
  content : attr(data-val) 'px';
  }
label.rg::before {
  display : inline-block;
  width   : 3.3em;
  content : attr(data-lib);
  }

<h3>make your sizing</h3>
<label class="rg" data-val="90" data-lib="width :"><input type="range" id="szW"  min="40" max="200" step="10" value="90"></label> <br>
<label class="rg" data-val="40" data-lib="height :"><input type="range" id="szH" min="30" max="80" step="5" value="40"></label> <br>

<hr>
<br>
<input type="checkbox" id="m8" class="model-8" ><label for="m8"></label>

Adjusting the size of a button in HTML and CSS

Answer №1

Answer №2

Answer №3

Similar questions

Reposition text below images in Meta Slider

The bot on Discord.js is sending an incorrect message when attempting to use the _leave command on the music bot

Activate Vuetify to toggle a data object in an array list when the mouse hovers over

Using dual ngFor in Angular 4: A step-by-step guide

Utilizing dynamic data within the ng-template

Generate a JSON (Jquery) structured table matrix outlining various roles and corresponding permissions such as read, write, delete, and write special

What is the best way to retrieve a value from an object using a promise after a certain period of time

What steps should I take to ensure that the login page functions properly?

The XMLHttpRequest() function throws NS_ERROR_FAILURE when sending requests to localhost using either an absolute or relative path

Can a universal selector be used to target a specific nth element and all subsequent occurrences of that element type?

Determine the Nautical Miles Between Various Coordinate Points using React

Encountered an unhandled rejection error: TypeError: Unable to destructure the property 'protocol' of 'window.location' because it is undefined

Is there a way for me to import a variable from one file and use require() to access it in another file?

Creating a custom Angular filter to group every 3 items within an iteration into a new div container

Searching for a specific key and its corresponding value within an Object Literal (JSON string / object) is necessary

Error: An unidentified type was encountered that is not a functioning element within an anonymous PHP JavaScript function

Issue in JavaScript / D3.js: When button is clicked, data fails to update and instead new positions are plotted

Converting JSON information into a JavaScript array of objects

What are some strategies for increasing efficiency in my drag and drop process?

How to ensure the height of an image in a Bootstrap flex row matches the