Как прикрепить кнопку CSS к HTML?

Question

[VitalyDmi]

Привет. У меня есть код, но там стоит стандартная кнопка, мне нужно изменить стиль кнопки, стиль есть, я его вставляю в код HTML, но кнопка не выполняет свои обязанности. Как правильно добавить её в код?
HTML:

<p><script src="http://code.jquery.com/jquery-3.3.1.slim.js"
            integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
            crossorigin="anonymous"></script> <script>
  (function ($) {
            $(document).ready(function () {
                let variants = [
                        "Яблоко",
                        "Банан",
                    ];
 $('#fruits-btn').on({
                    click() {
                        $(this)
                            .next('p')
                            .text(variants[parseInt(Math.random() * variants.length)]);
                    }
                })
            });
        })(jQuery);
  </script></p>
<div style="text-align: center;"><button id="fruits-btn" class="rnd-word yellow">Фрукт</button>
<p>&nbsp;</p>
</div>

Кнопка CSS:
<a href="">Button</a>

body {background: url(https://html5book.ru/wp-content/uploads/2015/07/background39.png);}
a {
  text-decoration: none;
  outline: none;
  display: inline-block;
  width: 140px;
  height: 45px;
  line-height: 45px;
  border-radius: 45px;
  margin: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 3px;
  font-weight: 600;
  color: #524f4e;
  background: white;
  box-shadow: 0 8px 15px rgba(0,0,0,.1);
  transition: .3s;
}
a:hover {
  background: #2EE59D;
  box-shadow: 0 15px 20px rgba(46,229,157,.4);
  color: white;
  transform: translateY(-7px);
}

Comments

[Одиночка Айс]

Пишете `button`, стилизуете `а`, что вы городите?

[leni_m]

ого!!! Да вы используете тот самый легендарный jquery от anonymous'а, громкие аплодисменты! Браво!

Answer 1

[Smeecy Smeecy]

Причём здесь тэг a , если у вас кнопка button. Вам сначала лучше обучиться основам вёрстки.

Answer 2

[koscsshtml]

Если кнопка

<button id="fruits-btn" class="rnd-word yellow">Фрукт</button>

, то обратитесь к ней по классам.
.rnd-word {...} и .rnd-word:hover