How to attach a CSS button for HTML?

Hi. I have the code but there is a standard button, I need to change the button style, the style is, I paste it into the HTML code, but the button does not perform his duties. How to add it in the code?
HTML:

<p><script src="http://code.jquery.com/jquery-3.3.1.slim.js"
integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
 by adding crossorigin="anonymous"></script> <script>
 (function ($) {
 $(document).ready(function () {
 let variants = [
"Apple",
Banana
];
$('#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">Fruit</button>
<p>&nbsp;</p>
</div>


Button 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);
}
March 19th 20 at 09:08
2 answers
March 19th 20 at 09:10
And here is a tag a , if you have a button button. You better first learn the basics of typesetting.
March 19th 20 at 09:12
If the button is
<button id="fruits-btn" class="rnd-word yellow">Fruit</button>
then refer to it by class.
.rnd-word {...} and .rnd-word:hover

Find more questions by tags HTMLCSS