body {
background: url(http://i.imgur.com/LMYkPk3.jpg) no-repeat center center fixed;
background-size: cover;
}
button {
display:inline-block;
margin: 0 10px 0 0;
padding: 5px 20px;
font-size: 15px;
font-family: cursive;
line-height: 1.8;
appearance: none;
box-shadow: none;
border-radius: 20px;
}
button:focus {
outline: none;
}
section.flat button {
color: #fff;
background-color: transparent;
text-shadow: -1px 1px #417cb8;
border: none;
}
section.flat button:hover,
section.flat button.hover {
background-color: transparent;
border: 2px solid orange;
}
section.flat button:active,
section.flat button.active {
background-color: mintcream;
text-shadow: -1px 1px #193047;
color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title></title>
</head>
<body>
<div id="line"></div>
<section class="flat">
<button>button</button>
<button>another</button> <!-- works fine if just one button ... but as soon as there more they all "selects" when hovered over one (change of depth ...) -->
</section>
</body>
</html>I'm facing an issue with two buttons on my page where they both seem to behave in the same way. When I hover over just one of them, both of them change their behavior in terms of depth. How can I prevent this from happening?