CSS Button Style nicht anwenden

Question

Ich habe ein Problem mit der Implementierung eines Stils, den ich auf einem. Ich habe CSS3 dafür benutzt. Lokal, wenn ich es versuche, funktioniert es so, wie es sollte, der Stil ist da, aber wenn ich es auf mein Hosting hochlade, wendet es den Stil nicht an.

Hier ist, was ich auf der HTML-Datei:

<button id="liveButton" class="btn" style="padding: 10px;">Livestream</button> 

Hier ist, was ich auf dem Sheet haben:

.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; 
} 

ich verschiedene Dinge ausprobiert habe auf das, was ich von mehreren Websites zu lesen, einschließlich einige auf dieser Seite, aber es wird einfach nicht angezeigt. Normalerweise sollte es einen blauen Knopf zeigen, aber auf der Seite zeigt es nur eine generische/Standard Art von Knopf.

Auf der Suche nach einigen Erkenntnissen dazu. Vielen Dank!

UPDATE Es wurde behoben, indem das Passwort im Verzeichnis, in das ich es hochgeladen hatte, entfernt wurde. Es scheint, dass es nicht funktionierte, weil es passwortgeschützt war? Aber das zeigte den Stil für den Button für mich, nachdem ich ihn entfernt habe.

Answer 1

Ihr Code funktioniert einwandfrei. Bitte lesen Sie dies vor dem Einreichen der Frage: How to create a Minimal, Complete, and Verifiable example.

• Minimal - so wenig Code wie möglich verwenden, die nach wie vor das gleiche Problem erzeugt
• Complete - Stellen Sie alle Teile benötigt, um das Problem zu reproduzieren
• Nachweisbare - Testen Sie den Code, den Sie über bieten stellen sie sicher, es reproduziert das 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>