Menu
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>
452
asked Nov 30 '25 09:11
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With