Cannot center text inside buttons - html

Question

I'm making a calculator app and having a bit weird styling problem. Can someone explain me why the digits inside buttons are not centered vertically? If you look closer it looks like they are a little bit above center position. I think its because of font-family placed in "*" selector.
But why is that not centered even if the font is different? Even vertical-align: middle does not help.
buttons
let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");
input1.checked = true;
function setColorTheme() {
if (input1.checked == true) {
main.classList.add("dark");
} else {
main.classList.remove("dark");
}
if (input2.checked == true) {
main.classList.add("light");
} else {
main.classList.remove("light");
}
if (input3.checked == true) {
main.classList.add("saturated");
} else {
main.classList.remove("saturated");
}
}
setColorTheme();
document.querySelectorAll('input[name="theme"]').forEach((e) => {
e.addEventListener("change", setColorTheme);
});
.dark {
--mainBackground: hsl(222, 26%, 31%);
--keypad_toggle_Background: hsl(223, 31%, 20%);
--screenBackground: hsl(224, 36%, 15%);
--removeKeyBackground: hsl(225, 21%, 49%);
--removeKeyShadow: hsl(224, 28%, 35%);
--equal_toggle_KeyBackground: hsl(6, 63%, 50%);
--equalKeyShadow: hsl(6, 70%, 34%);
--normalKeyBackground: hsl(30, 25%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(221, 14%, 31%);
--default: hsl(0, 0%, 100%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.light {
--mainBackground: hsl(0, 0%, 90%);
--keypad_toggle_Background: hsl(0, 5%, 81%);
--screenBackground: hsl(0, 0%, 93%);
--removeKeyBackground: hsl(185, 42%, 37%);
--removeKeyShadow: hsl(185, 58%, 25%);
--equal_toggle_KeyBackground: hsl(25, 98%, 40%);
--equalKeyShadow: hsl(25, 99%, 27%);
--normalKeyBackground: hsl(45, 7%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(60, 10%, 19%);
--default: hsl(0, 0%, 0%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.saturated {
--mainBackground: hsl(268, 75%, 9%);
--keypad_toggle_Background: hsl(268, 71%, 12%);
--screenBackground: hsl(268, 71%, 12%);
--removeKeyBackground: hsl(281, 89%, 26%);
--removeKeyShadow: hsl(285, 91%, 52%);
--equal_toggle_KeyBackground: hsl(176, 100%, 44%);
--equalKeyShadow: hsl(177, 92%, 70%);
--normalKeyBackground: hsl(268, 47%, 21%);
--normalKeyShadow: hsl(290, 70%, 36%);
--normalKeyText: hsl(52, 100%, 62%);
--default: hsl(52, 100%, 62%);
--equalColorText: hsl(198, 20%, 13%);
--delResetColorText: hsl(0, 0%, 100%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Spartan", sans-serif;
}
main {
background: var(--mainBackground);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: var(--default);
}
.calc-container {
min-height: 55vh;
width: 28%;
}
.calc-container header {
display: flex;
min-height: 10vh;
width: 90%;
margin: auto;
align-items: center;
justify-content: space-between;
}
.calc-container header .theme-toggler {
display: flex;
margin-bottom: 0.8rem;
}
.calc-container header .theme-toggler h2 {
font-size: 12px;
align-self: flex-end;
margin-right: 1rem;
}
.calc-container header .theme-toggler .label-container {
display: flex;
justify-content: space-evenly;
text-align: center;
}
.calc-container header .theme-toggler .label-container .label {
margin: 0rem 0.35rem;
}
.calc-container header .theme-toggler .input-container {
width: 60px;
height: 20px;
border-radius: 10px;
background: var(--keypad_toggle_Background);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.calc-container header .theme-toggler .input-container .input {
appearance: none;
background: var(--equal_toggle_KeyBackground);
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}
.calc-container header .theme-toggler .input-container .input:checked {
opacity: 1;
}
.calc-container .screen {
min-height: 10vh;
width: 90%;
background: var(--screenBackground);
margin: auto;
border-radius: 10px;
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
word-wrap: break-word;
word-break: break-all;
}
.calc-container .screen-one,
.calc-container .screen-two {
margin: 0.2rem 1.8rem;
width: auto;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.calc-container .screen-one {
font-size: 15px;
opacity: 0.5;
}
.calc-container .screen-two {
font-size: 1.4rem;
}
.calc-container .button-container {
min-height: 40vh;
width: 90%;
background: var(--keypad_toggle_Background);
border-radius: 10px;
margin: 1rem auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 1.5rem;
grid-gap: 1rem;
text-align: center;
}
.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete,
.calc-container .button-container .operation {
border-radius: 10px;
outline: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
background: var(--normalKeyBackground);
box-shadow: 0 5px var(--normalKeyShadow);
}
.calc-container .button-container .reset,
.calc-container .button-container .delete {
background: var(--removeKeyBackground);
color: var(--delResetColorText) !important;
box-shadow: 0 5px var(--removeKeyShadow);
}
.calc-container .button-container .reset:hover,
.calc-container .button-container .delete:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .equal {
background: var(--equal_toggle_KeyBackground);
box-shadow: 0 5px var(--equalKeyShadow);
color: var(--equalColorText) !important;
}
.calc-container .button-container .equal:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
color: var(--default);
}
.calc-container .button-container .button,
.calc-container .button-container .operation {
color: var(--normalKeyText);
}
.calc-container .button-container .button:hover,
.calc-container .button-container .operation:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset {
grid-column: 1/3;
}
.calc-container .button-container .equal {
grid-column: 3/5;
}
p {
position: absolute;
left: 50%;
bottom: 1%;
color: white;
font-size: 12px;
transform: translate(-50%, 0);
}
p span {
text-decoration: underline;
}
#media screen and (max-width: 1100px) {
.calc-container {
transform: translate(-50%, 0);
}
.button-container {
width: 300px !important;
}
.screen {
width: 300px !important;
}
header {
width: 300px !important;
}
p {
text-align: center;
width: 80%;
}
}
#media screen and (max-width: 375px) {
.calc-container {
transform: translate(-90%, -15%) !important;
}
input {
-webkit-appearance: none;
background: var(--equal_toggle_KeyBackground);
}
p {
text-align: center;
width: 60%;
}
header {
width: 300px !important;
}
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Spartan:wght#700&display=swap"
rel="stylesheet"
/>
<script src="./script.js" defer></script>
<title>Frontend Mentor | Calculator app</title>
</head>
<body>
<main id="main">
<div class="calc-container">
<header>
<h1>calc</h1>
<div class="theme-toggler">
<h2>THEME</h2>
<div>
<div class="label-container">
<label for="input1" class="label">1</label>
<label for="input2" class="label">2</label>
<label for="input3" class="label">3</label>
</div>
<div class="input-container">
<input id="input1" class="input" type="radio" name="theme" />
<input id="input2" class="input" type="radio" name="theme" />
<input id="input3" class="input" type="radio" name="theme" />
</div>
</div>
</div>
</header>
<div class="screen">
<div class="screen-one"></div>
<div class="screen-two"></div>
</div>
<div class="button-container">
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="delete">DEL</button>
<button class="button">4</button>
<button class="button">5</button>
<button class="button">6</button>
<button class="operation">+</button>
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="operation">-</button>
<button class="button">.</button>
<button class="button">0</button>
<button class="operation">/</button>
<button class="operation">x</button>
<button class="reset">RESET</button>
<button class="equal">=</button>
</div>
</div>
</main>
<p>
Challenge by <span>Frontend Mentor</span>. Coded by
<span>Adrian397</span>.
</p>
</body>
</html>

Answer 1

The usual issue is line-height. Since no numbers have descenders that's not apparent. I'd probably just add a span to contain the text and translate them down.
let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");
input1.checked = true;
function setColorTheme() {
if (input1.checked == true) {
main.classList.add("dark");
} else {
main.classList.remove("dark");
}
if (input2.checked == true) {
main.classList.add("light");
} else {
main.classList.remove("light");
}
if (input3.checked == true) {
main.classList.add("saturated");
} else {
main.classList.remove("saturated");
}
}
setColorTheme();
document.querySelectorAll('input[name="theme"]').forEach((e) => {
e.addEventListener("change", setColorTheme);
});
button>span {
transform: translateY(3px);
display: inline-block;
}
.dark {
--mainBackground: hsl(222, 26%, 31%);
--keypad_toggle_Background: hsl(223, 31%, 20%);
--screenBackground: hsl(224, 36%, 15%);
--removeKeyBackground: hsl(225, 21%, 49%);
--removeKeyShadow: hsl(224, 28%, 35%);
--equal_toggle_KeyBackground: hsl(6, 63%, 50%);
--equalKeyShadow: hsl(6, 70%, 34%);
--normalKeyBackground: hsl(30, 25%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(221, 14%, 31%);
--default: hsl(0, 0%, 100%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.light {
--mainBackground: hsl(0, 0%, 90%);
--keypad_toggle_Background: hsl(0, 5%, 81%);
--screenBackground: hsl(0, 0%, 93%);
--removeKeyBackground: hsl(185, 42%, 37%);
--removeKeyShadow: hsl(185, 58%, 25%);
--equal_toggle_KeyBackground: hsl(25, 98%, 40%);
--equalKeyShadow: hsl(25, 99%, 27%);
--normalKeyBackground: hsl(45, 7%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(60, 10%, 19%);
--default: hsl(0, 0%, 0%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.saturated {
--mainBackground: hsl(268, 75%, 9%);
--keypad_toggle_Background: hsl(268, 71%, 12%);
--screenBackground: hsl(268, 71%, 12%);
--removeKeyBackground: hsl(281, 89%, 26%);
--removeKeyShadow: hsl(285, 91%, 52%);
--equal_toggle_KeyBackground: hsl(176, 100%, 44%);
--equalKeyShadow: hsl(177, 92%, 70%);
--normalKeyBackground: hsl(268, 47%, 21%);
--normalKeyShadow: hsl(290, 70%, 36%);
--normalKeyText: hsl(52, 100%, 62%);
--default: hsl(52, 100%, 62%);
--equalColorText: hsl(198, 20%, 13%);
--delResetColorText: hsl(0, 0%, 100%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Spartan", sans-serif;
}
main {
background: var(--mainBackground);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: var(--default);
}
.calc-container {
min-height: 55vh;
width: 28%;
}
.calc-container header {
display: flex;
min-height: 10vh;
width: 90%;
margin: auto;
align-items: center;
justify-content: space-between;
}
.calc-container header .theme-toggler {
display: flex;
margin-bottom: 0.8rem;
}
.calc-container header .theme-toggler h2 {
font-size: 12px;
align-self: flex-end;
margin-right: 1rem;
}
.calc-container header .theme-toggler .label-container {
display: flex;
justify-content: space-evenly;
text-align: center;
}
.calc-container header .theme-toggler .label-container .label {
margin: 0rem 0.35rem;
}
.calc-container header .theme-toggler .input-container {
width: 60px;
height: 20px;
border-radius: 10px;
background: var(--keypad_toggle_Background);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.calc-container header .theme-toggler .input-container .input {
appearance: none;
background: var(--equal_toggle_KeyBackground);
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}
.calc-container header .theme-toggler .input-container .input:checked {
opacity: 1;
}
.calc-container .screen {
min-height: 10vh;
width: 90%;
background: var(--screenBackground);
margin: auto;
border-radius: 10px;
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
word-wrap: break-word;
word-break: break-all;
}
.calc-container .screen-one,
.calc-container .screen-two {
margin: 0.2rem 1.8rem;
width: auto;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.calc-container .screen-one {
font-size: 15px;
opacity: 0.5;
}
.calc-container .screen-two {
font-size: 1.4rem;
}
.calc-container .button-container {
min-height: 40vh;
width: 90%;
background: var(--keypad_toggle_Background);
border-radius: 10px;
margin: 1rem auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 1.5rem;
grid-gap: 1rem;
text-align: center;
}
.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete,
.calc-container .button-container .operation {
border-radius: 10px;
outline: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
background: var(--normalKeyBackground);
box-shadow: 0 5px var(--normalKeyShadow);
}
.calc-container .button-container .reset,
.calc-container .button-container .delete {
background: var(--removeKeyBackground);
color: var(--delResetColorText) !important;
box-shadow: 0 5px var(--removeKeyShadow);
}
.calc-container .button-container .reset:hover,
.calc-container .button-container .delete:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .equal {
background: var(--equal_toggle_KeyBackground);
box-shadow: 0 5px var(--equalKeyShadow);
color: var(--equalColorText) !important;
}
.calc-container .button-container .equal:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
color: var(--default);
}
.calc-container .button-container .button,
.calc-container .button-container .operation {
color: var(--normalKeyText);
}
.calc-container .button-container .button:hover,
.calc-container .button-container .operation:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset {
grid-column: 1/3;
}
.calc-container .button-container .equal {
grid-column: 3/5;
}
p {
position: absolute;
left: 50%;
bottom: 1%;
color: white;
font-size: 12px;
transform: translate(-50%, 0);
}
p span {
text-decoration: underline;
}
#media screen and (max-width: 1100px) {
.calc-container {
transform: translate(-50%, 0);
}
.button-container {
width: 300px !important;
}
.screen {
width: 300px !important;
}
header {
width: 300px !important;
}
p {
text-align: center;
width: 80%;
}
}
#media screen and (max-width: 375px) {
.calc-container {
transform: translate(-90%, -15%) !important;
}
input {
-webkit-appearance: none;
background: var(--equal_toggle_KeyBackground);
}
p {
text-align: center;
width: 60%;
}
header {
width: 300px !important;
}
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Spartan:wght#700&display=swap" rel="stylesheet" />
<script src="./script.js" defer></script>
<title>Frontend Mentor | Calculator app</title>
</head>
<body>
<main id="main">
<div class="calc-container">
<header>
<h1>calc</h1>
<div class="theme-toggler">
<h2>THEME</h2>
<div>
<div class="label-container">
<label for="input1" class="label">1</label>
<label for="input2" class="label">2</label>
<label for="input3" class="label">3</label>
</div>
<div class="input-container">
<input id="input1" class="input" type="radio" name="theme" />
<input id="input2" class="input" type="radio" name="theme" />
<input id="input3" class="input" type="radio" name="theme" />
</div>
</div>
</div>
</header>
<div class="screen">
<div class="screen-one"></div>
<div class="screen-two"></div>
</div>
<div class="button-container">
<button class="button"><span>7</span></button>
<button class="button"><span>8</span></button>
<button class="button"><span>9</span></button>
<button class="delete"><span>DEL</span></button>
<button class="button"><span>4</span></button>
<button class="button"><span>5</span></button>
<button class="button"><span>6</span></button>
<button class="operation"><span>+</span></button>
<button class="button"><span>1</span></button>
<button class="button"><span>2</span></button>
<button class="button"><span>3</span></button>
<button class="operation"><span>-</span></button>
<button class="button"><span>.</span></button>
<button class="button"><span>0</span></button>
<button class="operation"><span>/</span></button>
<button class="operation"><span>x</span></button>
<button class="reset"><span>RESET</span></button>
<button class="equal"><span>=</span></button>
</div>
</div>
</main>
<p>
Challenge by <span>Frontend Mentor</span>. Coded by
<span>Adrian397</span>.
</p>
</body>
</html>

Answer 2

A simple solution is to use padding-top: Check this out.
let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");
input1.checked = true;
function setColorTheme() {
if (input1.checked == true) {
main.classList.add("dark");
} else {
main.classList.remove("dark");
}
if (input2.checked == true) {
main.classList.add("light");
} else {
main.classList.remove("light");
}
if (input3.checked == true) {
main.classList.add("saturated");
} else {
main.classList.remove("saturated");
}
}
setColorTheme();
document.querySelectorAll('input[name="theme"]').forEach((e) => {
e.addEventListener("change", setColorTheme);
});
.dark {
--mainBackground: hsl(222, 26%, 31%);
--keypad_toggle_Background: hsl(223, 31%, 20%);
--screenBackground: hsl(224, 36%, 15%);
--removeKeyBackground: hsl(225, 21%, 49%);
--removeKeyShadow: hsl(224, 28%, 35%);
--equal_toggle_KeyBackground: hsl(6, 63%, 50%);
--equalKeyShadow: hsl(6, 70%, 34%);
--normalKeyBackground: hsl(30, 25%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(221, 14%, 31%);
--default: hsl(0, 0%, 100%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.light {
--mainBackground: hsl(0, 0%, 90%);
--keypad_toggle_Background: hsl(0, 5%, 81%);
--screenBackground: hsl(0, 0%, 93%);
--removeKeyBackground: hsl(185, 42%, 37%);
--removeKeyShadow: hsl(185, 58%, 25%);
--equal_toggle_KeyBackground: hsl(25, 98%, 40%);
--equalKeyShadow: hsl(25, 99%, 27%);
--normalKeyBackground: hsl(45, 7%, 89%);
--normalKeyShadow: hsl(28, 16%, 65%);
--normalKeyText: hsl(60, 10%, 19%);
--default: hsl(0, 0%, 0%);
--equalColorText: hsl(0, 0%, 100%);
--delResetColorText: hsl(0, 0%, 100%);
}
.saturated {
--mainBackground: hsl(268, 75%, 9%);
--keypad_toggle_Background: hsl(268, 71%, 12%);
--screenBackground: hsl(268, 71%, 12%);
--removeKeyBackground: hsl(281, 89%, 26%);
--removeKeyShadow: hsl(285, 91%, 52%);
--equal_toggle_KeyBackground: hsl(176, 100%, 44%);
--equalKeyShadow: hsl(177, 92%, 70%);
--normalKeyBackground: hsl(268, 47%, 21%);
--normalKeyShadow: hsl(290, 70%, 36%);
--normalKeyText: hsl(52, 100%, 62%);
--default: hsl(52, 100%, 62%);
--equalColorText: hsl(198, 20%, 13%);
--delResetColorText: hsl(0, 0%, 100%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Spartan", sans-serif;
}
main {
background: var(--mainBackground);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: var(--default);
}
.calc-container {
min-height: 55vh;
width: 28%;
}
.calc-container header {
display: flex;
min-height: 10vh;
width: 90%;
margin: auto;
align-items: center;
justify-content: space-between;
}
.calc-container header .theme-toggler {
display: flex;
margin-bottom: 0.8rem;
}
.calc-container header .theme-toggler h2 {
font-size: 12px;
align-self: flex-end;
margin-right: 1rem;
}
.calc-container header .theme-toggler .label-container {
display: flex;
justify-content: space-evenly;
text-align: center;
}
.calc-container header .theme-toggler .label-container .label {
margin: 0rem 0.35rem;
}
.calc-container header .theme-toggler .input-container {
width: 60px;
height: 20px;
border-radius: 10px;
background: var(--keypad_toggle_Background);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.calc-container header .theme-toggler .input-container .input {
appearance: none;
background: var(--equal_toggle_KeyBackground);
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}
.calc-container header .theme-toggler .input-container .input:checked {
opacity: 1;
}
.calc-container .screen {
min-height: 10vh;
width: 90%;
background: var(--screenBackground);
margin: auto;
border-radius: 10px;
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
word-wrap: break-word;
word-break: break-all;
}
.calc-container .screen-one,
.calc-container .screen-two {
margin: 0.2rem 1.8rem;
width: auto;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.calc-container .screen-one {
font-size: 15px;
opacity: 0.5;
}
.calc-container .screen-two {
font-size: 1.4rem;
}
.calc-container .button-container {
min-height: 40vh;
width: 90%;
background: var(--keypad_toggle_Background);
border-radius: 10px;
margin: 1rem auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 1.5rem;
grid-gap: 1rem;
text-align: center;
}
.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete,
.calc-container .button-container .operation {
border-radius: 10px;
outline: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
background: var(--normalKeyBackground);
box-shadow: 0 5px var(--normalKeyShadow);
/* ADD THIS */
padding-top: 5px;
}
.calc-container .button-container .reset,
.calc-container .button-container .delete {
background: var(--removeKeyBackground);
color: var(--delResetColorText) !important;
box-shadow: 0 5px var(--removeKeyShadow);
}
.calc-container .button-container .reset:hover,
.calc-container .button-container .delete:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .equal {
background: var(--equal_toggle_KeyBackground);
box-shadow: 0 5px var(--equalKeyShadow);
color: var(--equalColorText) !important;
}
.calc-container .button-container .equal:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
color: var(--default);
}
.calc-container .button-container .button,
.calc-container .button-container .operation {
color: var(--normalKeyText);
}
.calc-container .button-container .button:hover,
.calc-container .button-container .operation:hover {
transform: translateY(5px);
box-shadow: none;
}
.calc-container .button-container .reset {
grid-column: 1/3;
}
.calc-container .button-container .equal {
grid-column: 3/5;
}
p {
position: absolute;
left: 50%;
bottom: 1%;
color: white;
font-size: 12px;
transform: translate(-50%, 0);
}
p span {
text-decoration: underline;
}
#media screen and (max-width: 1100px) {
.calc-container {
transform: translate(-50%, 0);
}
.button-container {
width: 300px !important;
}
.screen {
width: 300px !important;
}
header {
width: 300px !important;
}
p {
text-align: center;
width: 80%;
}
}
#media screen and (max-width: 375px) {
.calc-container {
transform: translate(-90%, -15%) !important;
}
input {
-webkit-appearance: none;
background: var(--equal_toggle_KeyBackground);
}
p {
text-align: center;
width: 60%;
}
header {
width: 300px !important;
}
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Spartan:wght#700&display=swap"
rel="stylesheet"
/>
<script src="./script.js" defer></script>
<title>Frontend Mentor | Calculator app</title>
</head>
<body>
<main id="main">
<div class="calc-container">
<header>
<h1>calc</h1>
<div class="theme-toggler">
<h2>THEME</h2>
<div>
<div class="label-container">
<label for="input1" class="label">1</label>
<label for="input2" class="label">2</label>
<label for="input3" class="label">3</label>
</div>
<div class="input-container">
<input id="input1" class="input" type="radio" name="theme" />
<input id="input2" class="input" type="radio" name="theme" />
<input id="input3" class="input" type="radio" name="theme" />
</div>
</div>
</div>
</header>
<div class="screen">
<div class="screen-one"></div>
<div class="screen-two"></div>
</div>
<div class="button-container">
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="delete">DEL</button>
<button class="button">4</button>
<button class="button">5</button>
<button class="button">6</button>
<button class="operation">+</button>
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="operation">-</button>
<button class="button">.</button>
<button class="button">0</button>
<button class="operation">/</button>
<button class="operation">x</button>
<button class="reset">RESET</button>
<button class="equal">=</button>
</div>
</div>
</main>
<p>
Challenge by <span>Frontend Mentor</span>. Coded by
<span>Adrian397</span>.
</p>
</body>
</html>