Im trying to make it that you put two colors in the inputs and the button even before pressed is a gradient of those colors.
<!doctype html>
<html>
<head>
<script src='color.js'> </script>
<link href= 'color.css' rel='stylesheet'>
</head>
<body>
<input type='text' value='' id='left' class='input2'/>
<input type='text' value='' id='right' class='input1'/>
<button type="button" onclick="color()" class='but:hover'>
Make Gradient
</button>
</body>
</html>
function color(){
let grade = document.getElementById('left').value;
if (grade == ''){
grade = 'white'
}
let gradetwo = document.getElementById('right').value;
if (gradetwo == ''){
gradetwo = 'white'
}
document.body.style.background = "linear-gradient(to right," + grade + "," + gradetwo + ")";
document.body.style.but:hover.background = "linear-gradient(to right," + grade + "," + gradetwo + ")";
}
.but:hover{
border-radius: 12px;
width: 250px;
height: 60px;
position: absolute;
left: 550px;
top: 225px;
}
I thought I can do the same thing as just making a background gradient but I cant :hover in javascript.
