CODEWITHSUNDEEP
htmlcssbutton
Forever Learning
Forever Learning

Reputation: 39

CSS Button Style not Applying

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

Answers (1)

Mitesh Mynee
Mitesh Mynee

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

Related Questions