Как поменять кнопку через CSS?

Доброго всем дня!

Я в CSS вообще ноль, поэтому прошу не ругать.
Решила сменить кнопку загрузки файла на свой, но что-то не выходит.
А именно...

Исходный код в css такой:

.post-content .post-files .file button{background-color:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;text-align:left!important}
.post-content .post-files .file button:hover{text-decoration:underline}.post-content 
.post-files .file i{margin-right:8px}

Я взяла с просторов сети код:

/* Style buttons */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  font-size: 16px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}

и это:

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>

<!-- Full width -->
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>

Я понимаю, что мой новый код надо вставить вместо старого, но при этом не меняю имя .file button на.btn.
В шапке сайта вставляю

<button class=".file button"><i class="fa fa-download"></i> Download</button>

и ничего не происходит) Кеш чищу каждый раз, толку нет. Разве что сменились размер и цвет кнопки. А вот надписи Download нет)

Спасибо