When I add backround color, the button stops working-CodePudding

When I delete this line, it works perfectly but when I add, it doesn't.

<html lang="en">
<head>
<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>New</title>
<style>
button {
display: block;
margin: auto;
padding: 10px 15px;
color: #354259;
background-color: #ECE5C7;  <! -- this one -- !>
}
</style>
</head>
<body>
<button>Apply now</button>
</body>
</html>

Thank you in advance.

CodePudding user response：

Your code is working fine. You are overwriting the default CSS for button element and not defining what to do when hovering, which is fine but it won't look good(CSS)

Try telling your element what to do onhover event like below.

<html lang="en">

<head>
  <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>New</title>
  <style>
    button {
      display: block;
      margin: auto;
      padding: 10px 15px;
      color: #354259;
      cursor: pointer;
      background-color: #ECE5C7;
      <! -- this one -- !>
    }
    
    button:hover {
      display: block;
      margin: auto;
      padding: 10px 15px;
      color: #354259;
      cursor: pointer;
      background-color: black;
      <! -- this one -- !>
    }
  </style>
</head>

<body>
  <button>Apply now</button>
</body>

</html>

CodePudding user response：

Welcome to StackOverflow.
When I put your code into codepen it seems to be working well https://codepen.io/Javscript/pen/ExQorEN?editors=1000

codepen

It may look like it is not working but it is. if your program has more code to it there may be an issue that is within the more code that is interfering with the button.

CodePudding user response：

Your code is working fine. You are overwriting the default CSS for button,Use specipic css for your button. it will better ... maybe you want this type button check this button it will help you...

<html lang="en">

<head>
  <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>New</title>
  <style>
    
    
    
button {
  display: block;
  margin: auto;
  padding: 10px 15px;
  color: #354259;
  background-color: #ECE5C7; 
  overflow: hiden;
  border:  1px solid;
}

    
  </style>
</head>

<body>
  <button>Apply now</button>
</body>

</html>

CodePudding user response：

Fix the issue and Just added some styling.

button {
  display: block;
  margin: auto;
  padding: 10px 15px;
  color: #354259;
  background-color: #ECE5C7;  <! -- this one -- !>
}
button:hover {
  cursor: pointer;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
  transform: translatey(-3px);
  transition: all 0.1s ease-in-out;
}
button:active {
  box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
  transform: translatey(0px);
  transition: all 0.1s ease-in-out;
}

<button type="button">Apply now</button>