/*

Custom hover button CSS file to solve home screen hover button issue
added <link href="css/custom_home_hover_button.css" rel="stylesheet"> in index.html 

*/

<style>
/* base: ensure anchor itself is targeted (use 'a' to match your markup) */
a.btn.btn-roundeded.btn-reveal {
  background-color: #0F44B6; /* default blue */
  color: #fff;               /* default text white */
  transition: all .25s ease;
  position: relative;        /* allow z-index on children */
}

/* hover/focus/active: background white, text blue */
a.btn.btn-roundeded.btn-reveal:hover,
a.btn.btn-roundeded.btn-reveal:focus,
a.btn.btn-roundeded.btn-reveal:active {
  background-color: #fff !important;   /* ensure white bg */
  color: #0F44B6 !important;           /* force blue text */
  text-decoration: none;
}

/* child elements (span, icon) MUST change color too */
a.btn.btn-roundeded.btn-reveal:hover span,
a.btn.btn-roundeded.btn-reveal:hover i,
a.btn.btn-roundeded.btn-reveal:focus span,
a.btn.btn-roundeded.btn-reveal:focus i {
  color: #0F44B6 !important;
  position: relative;   /* sit above possible pseudo-element */
  z-index: 2;
}

/* If the button uses a pseudo-element for the white overlay,
   lower its stacking so the text sits above it */
a.btn.btn-roundeded.btn-reveal::before,
a.btn.btn-roundeded.btn-reveal::after {
  z-index: 1;
}

/* defensive: target specific icon class if used */
a.btn.btn-roundeded.btn-reveal:hover i.icon-chevron-right {
  color: #0F44B6 !important;
  transform: translateX(4px); /* optional small slide */
}

/* optional: keep a thin blue border on hover so it doesn't 'disappear' */
a.btn.btn-roundeded.btn-reveal:hover {
  box-shadow: 0 0 0 1px rgba(15,68,182,0.12);
}
</style>