littlemoon
New Coder
This is the css code I have. The problem is that the change takes place separately, if i was to hover over just the button, it changes just the button to blue which makes the text invisible as its original colour is blue. I tried making the padding of the text bigger so that its the same size of the button so that difference doesn't occur but it shifts the position of the text which isn't good. I'm sure there is an easier way of doing this that I'm missing? Im new to this.
CSS:
button {
border: solid thin #071F4F;
border-radius: 1%;
padding: 2%;
background-color:#CAD0D1;
text-align: center;
position: absolute;
left: 38%;
top: 60%;
width: 18vw;
font-size: 90%;
}
button a {
color: #071F4F;
text-decoration: none;
letter-spacing: 1vw;
padding: 5vh 20vh;
}
button a:hover {
color:#CAD0D1;
transition: 0.5s;
}
button:hover {
background-color:#071F4F;
transition: 0.5s;
}
Last edited by a moderator: