Link button color HTML/CSS [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have quite a problem, I created a button that leads to an iTunes page.
When I did the CSS I had no problem until I noticed that I didnt link the button to the page. So when I did, I couldn't disable the underline of my text inside my button.
I worked my way through and now I'm stuck with a text that is not underlined and changes color when hovered as I wanted. Only thing is that the border doesn't change color at the same time as the text.
Example: I can hover (and thus change the color) my border without touching my text, and obviously this is not what I want.
Snippet :
.navigation{
background-color:#C5C5C5;
}
.btniTunes {
margin-left: 150px;
margin-top: 150px;
font-family: 'Roboto', sans-serif;
background-color: transparent;
border: 1px solid #ffffff;
display: inline-block;
cursor: pointer;
color: white;
font-size: 18px;
padding: 10px 18px;
text-decoration: none;
}
.btniTunes:hover {
background-color: black;
color: #E80C7A;
border: 1px solid #E80C7A;
text-decoration: none;
}
.btniTunes a {
text-decoration: none;
color: white;
}
<nav class="navigation">
<ul class="bouttons">
<div class="btnSite">
TO THE SITE
</div>
<div class="btniTunes">
TO THE ITUNES
</div>
</ul>
</nav>
So basically, I want to have a button that links to a page, with black background, white text and border, that has the text and border color that changes to #E80C7A when hovered and without underline on the text.

Answer 1

Just close the brackets in css:
.btniTunes {
margin-left:150px;
margin-top: 150px;
font-family: 'Roboto', sans-serif;
background-color:transparent;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:white;
font-size:18px;
padding:10px 18px;
text-decoration:none;
}
.btniTunes:hover {
background-color:black;
color:#E80C7A;
border:1px solid #E80C7A;
text-decoration:none;
}
.btniTunes a {
text-decoration:none;
color: white;
}
and also if you want the <a> to cover the button, set its "display" to the block:
.btniTunes a {
text-decoration:none;
color: white;
display:block;
width:100%;
height:100%;
}

Answer 2

Here you are :)
Remove the padding from .btniTunes and add it to .btniTunes a and add display: block; to it.
.btniTunes {
margin-left: 150px;
margin-top: 150px;
font-family: 'Roboto', sans-serif;
background-color: red;
border: 1px solid #ffffff;
display: inline-block;
cursor: pointer;
color: white;
font-size: 18px;
text-decoration: none;
}
.btniTunes:hover {
background-color: black;
color: #E80C7A;
border: 1px solid #E80C7A;
text-decoration: none;
}
.btniTunes a {
display: block;
padding: 10px 18px;
text-decoration: none;
color: white;
}
.btniTunes:hover a {
color: #E80C7A;
}
<nav class="navigation">
<ul class="bouttons">
<div class="btnSite">
TO THE SITE
</div>
<div class="btniTunes">
TO THE ITUNES
</div>
</ul>
</nav>