As far as I can tell from your code, the problem is not in resizing the screen, but in the fact that your :hover rule does not reach any selector. I explain:
In this answer I talk a little about pseudo-selectors . Obviously, the focus of the answer is another, but I cite it by the fact that :hover is also a pseudo-selector . In a simplistic way, :hover kicks in when you hover over something. See:
.button{
padding: 1em;
background-color: aqua;
width: 5em;
border-radius: 10px;
cursor: pointer;
transition: all 0.5s ease;
}
.button:hover{
background-color: green;
color: white;
}
<div class="button">Hover me!</div>
So, all occurrences of the .button class in the hover event will receive the properties defined within the pseudo-selector .
It turns out that in your code, your : hover rule is not related to any existing tag . Reducing your problem, to make it easier to understand, we have the following snippet :
body {
font-family: verdana;
background-color: black;
color: white;
}
.div1 {
font-size: 30px;
float: left;
width: 360px;
height: auto;
margin: 10px;
padding: 10px;
}
.div2 {
float: right;
}
.btn-style {
border: solid 2px #0354f7;
border-radius: 0px 10px 50px 4px;
moz-border-radius: 0px 10px 50px 4px;
-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
font-size: 30px;
color: #ffffff;
padding: 5px 17px;
background-color: #006fff;
cursor: pointer;
padding: 5px 40px 5px 20px;
}
.btn2 {
border: solid 2px #0354f7;
border-radius: 4px 0px 0px 50px;
moz-border-radius: 4px 0px 0px 50px;
-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
font-size: 30px;
color: #ffffff;
padding: 5px 17px;
background-color: #006fff;
cursor: pointer;
padding: 5px 40px 5px 20px;
}
[name="btn"]:hover, [name="btn2"]:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
cursor: pointer;
}
<div class="div1 style=" text-align: left; font-family: verdana; font-size: 30px;>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn" class="btn-style" value="CBA" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn" class="btn-style" value="AIC" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn" class="btn-style" value="CIRCULARES" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn" class="btn-style" value="FORMULÁRIOS" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn" class="btn-style" value="FOLHETOS" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn" class="btn-style" value="ANEXOS ICA 53-2" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn" class="btn-style" value="ANEXO ICA 63-10" />
</a>
</p>
</div>
<div class="div2" style="text-align: right; font-family: verdana; font-size: 30px;">
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn2" class="btn2" value="TCA" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn2" class="btn2" value="RCSV" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn2" class="btn2" value="RPA" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn2" class="btn2" value="ROTAER" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn2" class="btn2" value="AIP MAP" />
</a>
</p>
<p>
<a href="C:/CBA" target="_blank">
<input type="button" name="btn2" class="btn2" value="AIP BRASIL" />
</a>
</p>
<h2><a href="C:/CBA" target="_blank"><input type="button" name="btn2" class="btn2" value="SUPLEMENTO AIP" /></a></h2>
</div>
See that :hover now works because I've changed the selector it refers to. Your original code did not contain any .btn classes so :hover could work. So, I changed the selector to [name="btn"]:hover and [name="btn2"]:hover because, curiously, all buttons have in the name attribute what I suppose should be the class. Note that you are using the name attribute erroneously .
Even though the change I've proposed works and solves your problem, I strongly suggest you change your HTML to the correct use of the name attribute, and make your :hover rules using classes.
