Reputation: 39
I'm having a problem implementing a style I put on a . I've used CSS3 for it. Locally, when I try it, it works as it should, the style is there but when I upload it on my hosting it doesn't apply the style.
Here's what I use on the HTML file:
<button id="liveButton" class="btn" style="padding: 10px;">Livestream</button>
Here's what I have on the stylesheet:
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 15px 25px 15px 25px;
border: solid #1f628d 1px;
text-decoration: none;
}
.btn: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;
}
I've tried different things based on what I read from several websites including some on this site but it just won't show. Typically, it should show a Blue Button but on the site it just shows a Generic/Default kind of button.
Looking for some insights into this. Thanks!
UPDATE Fixed it by removing Password on the Directory where I uploaded it. It seems like it wasn't working because it was password protected? But that showed the style for the Button for me after I removed it.
Upvotes: 1
Views: 2713
Reputation: 55
Your code is working just fine. Please read this before submitting question: How to create a Minimal, Complete, and Verifiable example.
- Minimal – Use as little code as possible that still produces the same problem
- Complete – Provide all parts needed to reproduce the problem
- Verifiable – Test the code you're about to provide to make sure it reproduces the problem
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 15px 25px 15px 25px;
border: solid #1f628d 1px;
text-decoration: none;
}
.btn: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;
}
<button id="liveButton" class="btn" style="padding: 10px;">Livestream</button>
Upvotes: 1