Пишем код HTML:
Пишем стиль для кнопок:
Добавляем jquery:
Смотрим наш результат:
HTML:
<button data-gooey>Hover over me</button>
<button data-gooey>Gooey, eh?</button>
<button data-gooey>
<a href="https://garet.io" target="_blank">garet.io</a></button>
SCSS:
$bgColor: papayawhip;
$buttonColor: dodgerblue;
$buttonTextColor: white;
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: $bgColor;
margin: 0;
padding: 0;
}
button {
background: $buttonColor;
border: none;
padding: 15px;
font-size: 20px;
color: $buttonTextColor;
cursor: pointer;
margin: 40px 0;
&:focus {
outline: none;
}
a {
color: inherit;
text-decoration: none;
}
}
JavaScript:
gooeyButtons();
