Tengo un botón que cuando se hace clic cambia el color de fondo. Sin embargo, me gustaría que el botón esté en el centro de la página (he usado una posición relativa); sin embargo, cuando trato de crear un ancho para el botón, aparece otro cuadro con un borde delgado. Me gustaría tener un botón del mismo tamaño y el texto centrado sin importar el texto (máximo 20 caracteres)
<!DOCTYPE html> <html lang="en"> <head> <style> top{ display: flex; justify-content: space-around; border: black 1px solid; background-color: chartreuse; } .main{ text-align: center; margin-top: 15%; border: black 1px solid; display: inline-block; position: relative; left: 40%; } button{ cursor: pointer; } #btn { font-size: 2em; font-weight: bold; padding: 1em; } </style> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colour Flipper</title> <link rel="stylesheet" href="colourflipper.css"> </head> <body> <div class="top"> <ul>Colour Flipper</ul> <ul>Simple</ul> <ul>Hex</ul> </div> <div class="main"> <button id="btn" onclick="myFunction();myyFunction()"> Background Colour </button> </div> <script src="colourflipper.js"></script> </body> <script> const colors = ["blue", "green", "yellow"]; let colorIndex = -1; function myFunction(){ colorIndex += 1; if (colorIndex > colors.length-1) colorIndex = 0; document.body.style.backgroundColor = colors[colorIndex] } let colorSindex = -1; function myyFunction(){ colorSindex +=1; if (colorSindex > colors.length-1) colorSindex = 0; document.querySelector('#btn').innerHTML = colors[colorSindex] } </script> </html>podría ayudarte
<!DOCTYPE html> <html lang="en"> <head> <style> top{ display: flex; justify-content: space-around; border: black 1px solid; background-color: chartreuse; } .main{ text-align: center; margin-top: 15%; border: black 1px solid; display: inline-block; position: relative; left: 40%; } button{ cursor: pointer; } #btn { font-size: 2em; font-weight: bold; padding: 1em; position: fixed; width: 20%; height: 20%; } </style> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colour Flipper</title> <link rel="stylesheet" href="colourflipper.css"> </head> <body> <div class="top"> <ul>Colour Flipper</ul> <ul>Simple</ul> <ul>Hex</ul> </div> <div class="main"> <button id="btn" onclick="myFunction();myyFunction()"> Background Colour </button> </div> <script src="colourflipper.js"></script> </body> <script> const colors = ["blue", "green", "yellow"]; let colorIndex = -1; function myFunction(){ colorIndex += 1; if (colorIndex > colors.length-1) colorIndex = 0; document.body.style.backgroundColor = colors[colorIndex] } let colorSindex = -1; function myyFunction(){ colorSindex +=1; if (colorSindex > colors.length-1) colorSindex = 0; document.querySelector('#btn').innerHTML = colors[colorSindex] } </script> </html>Como puedo comprobar, había aplicado un borde a .main en lugar de #btn y por eso estaba viendo un cuadro alrededor del botón.
Hice .main un elemento de bloque para que cubra todo el ancho y le di al elemento de botón un ancho fijo del 30%.
<!DOCTYPE html> <html lang="en"> <head> <style> top{ display: flex; justify-content: space-around; border: black 2px solid; background-color: chartreuse; } .main{ text-align: center; margin-top: 15%; display: block; /* made it block to cover the whole width */ position: relative; /* removed the border from here due to which you were seeing another box */ } button{ cursor: pointer; } #btn { margin: auto; font-size: 2em; font-weight: bold; padding: 1em; width: 30%; /* gave the button a fix width */ border: black 1px solid; } </style> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colour Flipper</title> <link rel="stylesheet" href="colourflipper.css"> </head> <body> <div class="top"> <ul>Colour Flipper</ul> <ul>Simple</ul> <ul>Hex</ul> </div> <div class="main"> <button id="btn" onclick="myFunction();myyFunction()"> Background Colour </button> </div> <script src="colourflipper.js"></script> </body> <script> const colors = ["blue", "green", "yellow"]; let colorIndex = -1; function myFunction(){ colorIndex += 1; if (colorIndex > colors.length-1) colorIndex = 0; document.body.style.backgroundColor = colors[colorIndex] } let colorSindex = -1; function myyFunction(){ colorSindex +=1; if (colorSindex > colors.length-1) colorSindex = 0; document.querySelector('#btn').innerHTML = colors[colorSindex] } </script> </html>Omití la display:inline-block para que .main tome el ancho completo:
También moví el border: black 1px solid; por lo que ahora pertenece al #btn .
También le di a #btn un ancho fijo.
.main{ text-align: center; margin-top: 15%; position: relative; } button{ cursor: pointer; } #btn { font-size: 2em; font-weight: bold; padding: 1em; border: black 1px solid; width:30%; }