Add shadow

This commit is contained in:
Fred Boniface 2025-07-21 00:18:57 +01:00
parent bd215391c9
commit cd9b990751

View File

@ -6,24 +6,27 @@
} }
</script> </script>
<button on:click={handleLogin} class="keycloak"> <button on:click={handleLogin} class="login-keycloak">
Login with FJLA Login with FJLA
</button> </button>
<style> <style>
.keycloak { .login-keycloak {
width: 70%; width: 70%;
height: 35px; height: 35px;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
background-color: blue; background-color: blue;
color: whitesmoke; color: whitesmoke;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
} box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* subtle base shadow */
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.keycloak:hover { .login-keycloak:hover {
background-color: rgb(52, 52, 252); background-color: rgb(0, 0, 193);
} box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* stronger shadow on hover */
}
</style> </style>