I have a button that when clicked changes the background colour. However I would like the button to be in the centre of the page (have used position relative) however when I try to create a width for the button another box comes up with a thin border. I would like to have a button the same size and the text centered no matter what text (max 20 characters)
<!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>Might help you
<!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>As I can check, you had applied a border to .main instead of #btn and that's why you were seeing a box around the button.
I made the .main a block element so it covers the whole width and gave the button element a fixed width of 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>
I omitted the display:inline-block so .main takes the full width:
I also moved the border: black 1px solid;
so it now belongs to the #btn.
I also gave #btn a fixed width.
.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%;
}