good_html_v1.1.2-1 Button on hover show transparent
i'm using style.bundle.css only with vue vite. All css are working as expected except background color on button is transaparent when hovering.
Replies (5)
Hi,
Thank you for reaching out to us.
All styles needed for buttons are included in style.bundle.css.
Do you have the same problem on our preview page?
https://preview.keenthemes.com/html/good/docs/base/buttons
Regards,
Lauris Stepanovs,
Keenthemes Support Team
The preview page is working correctly. The version good_html_v1.1.0-3 was working fine.
Hi,
Unfortunately, we were not able to reproduce this error in the latest Metronic version.
Please make sure that you are using the button element correctly and that you do not have any styles that might override Metronic default styles.
You can find examples in our documentation: https://preview.keenthemes.com/html/good/docs/base/buttons
If there are any steps on how we can reproduce this problem please let us know.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
1. create new clean project with vite -- npm create vue@latest
2. copy file from good_html_v1.1.2 > theme > assets > css > style.bundle.css to public folder in vite project
3. add <link rel="stylesheet" href="/style.bundle.css"> in index.html
4. add <button class="btn btn-success">Success</button>
5. npm run dev
6. hover mouse on button and see the result
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<link rel="stylesheet" href="/style.bundle.css">
</head>
<body>
<div>
<button class="btn btn-success">Success</button>
</div>
<div ></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Hi,
Sorry for the late reply.
To fix this you have to set dark or light mode with data-bs-theme attribute on html tag with a value of light or dark:
<html lang="en" data-bs-theme="light">In our SPA version, we add this attribute using the script below:
<!--begin::Theme mode setup on page load-->
<script>
let themeMode = "system"
if (localStorage.getItem("kt_theme_mode_value")) {
themeMode = localStorage.getItem("kt_theme_mode_value")
}
if (themeMode === "system") {
themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
}
document.documentElement.setAttribute("data-bs-theme", themeMode)
</script>
<!--end::Theme mode setup on page load-->Regards,
Lauris Stepanovs,
Keenthemes Support Team
