Issue
However when i move my css code back into the body in the html file (not using href="") the edits like padding, and color got applies to the frontend, here is my css code.
<style>
.subscribe-button {
background-color: rgb(204, 0, 0);
color:white;
border: none;
padding-top: 10px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
border-radius: 2px;
cursor: pointer;
margin-right: 5px;
margin-left: 10px;
transition: opacity 0.15s;
vertical-align: top;}
</style>
Solution
It looks like you've accedentally copied css with html tags into your .css file. Make sure that the only code you have in .css file is the code between tags.
Style.css file contents should look like this.
.subscribe-button {
background-color: rgb(204, 0, 0);
color:white;
border: none;
padding-top: 10px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
border-radius: 2px;
cursor: pointer;
margin-right: 5px;
margin-left: 10px;
transition: opacity 0.15s;
vertical-align: top;
}
.subscribe-button:hover {
opacity:0.8;
}
.subscribe-button:active {
opacity:0.4;
}
.join-button {
background-color: rgb(255, 255, 255);
border: 1px solid #065fd4;
border-radius: 2px;
border-style: solid;
border-width: 1px;
padding-top: 9px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 9px;
cursor: pointer;
margin-right: 5px;
transition: background-color .15s,
color .15s;
vertical-align: top;
}
.join-button:active {
opacity: 0.7;
}
.join-button:hover {
background-color: hwb(222 13% 3%);
color: rgb(255, 255, 255);
}
.tweet-button
{
color:rgb(255, 255, 255);
background-color: rgb(29, 155, 240);
border-style: solid;
border-color: rgb(3, 134, 216);
border-width: 1px;
padding-top: 7px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 7px;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
font-size: 15;
transition: box-shadow .15s;
vertical-align: top;
}
.tweet-button:hover {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.159);
}
html file contents should look like this
<button class="subscribe-button">
SUBSCRIBE
</button>
<button class="join-button">
JOIN
</button>
<button class="tweet-button">
Tweet
</button>
Answered By - Tony
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.