Привет. У меня есть код, но там стоит стандартная кнопка, мне нужно изменить стиль кнопки, стиль есть, я его вставляю в код 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> </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);
}
