From 3c69a7ce94a683b370916b3a8b9c1f2a8793ecf8 Mon Sep 17 00:00:00 2001 From: Raghav <raghavsmart1213@gmail.com> Date: Tue, 25 Feb 2025 14:56:38 +0000 Subject: [PATCH] Hover effects added for sign-in button --- _templates/login-content.php | 4 ++-- assets/dist/css/login-in.css | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/_templates/login-content.php b/_templates/login-content.php index cb6a62e..29e17e9 100644 --- a/_templates/login-content.php +++ b/_templates/login-content.php @@ -17,6 +17,6 @@ Remember me </label> </div> - <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button> - <p class="mt-5 mb-3 text-body-secondary">© 2017–2024</p> + <button class="hvr-grow-shadow btn btn-primary w-100 py-2 " type="submit">Sign in</button> + </form> diff --git a/assets/dist/css/login-in.css b/assets/dist/css/login-in.css index dcd46b4..1339b6a 100644 --- a/assets/dist/css/login-in.css +++ b/assets/dist/css/login-in.css @@ -29,4 +29,22 @@ body { margin-right: auto; width: 50%; } + + /* Hover effects for sign-in button */ + .hvr-grow-shadow { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow, transform; + transition-property: box-shadow, transform; + } + .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active { + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); + -webkit-transform: scale(1.1); + transform: scale(1.1); + } \ No newline at end of file -- GitLab