Changes for page Home

Last modified by Jesse Veentjer on 06-5-2024 05:01
From version 219.21
edited by Jesse Veentjer
on 16-2-2024 11:02
Change comment: There is no comment for this version
To version 219.7
edited by Jesse Veentjer
on 15-2-2024 04:33
Change comment: There is no comment for this version

Summary

Details

XWiki.StyleSheetExtension[0]
Code
... ... @@ -3,16 +3,15 @@
3 3   height: 169px;
4 4   width: 100%;
5 5  }
6 -
7 7   /* Styling for the button */
8 8   .login-btn {
9 9   display: inline-block;
10 - padding: 24px 48px; /* Increased padding for a slightly bigger button */
11 - background-color: #D9D9D9; /* Grijs (formulier - header) */
9 + padding: 12px 24px; /* Increased padding for a slightly bigger button */
10 + background-color: rgb(217, 217, 217); /* Grijs (formulier - header) */
12 12   color: #000; /* Text color */
13 13   border: none;
14 14   border-radius: 5px;
15 - font-size: 27px; /* Increased font size for a slightly larger button */
14 + font-size: 18px; /* Increased font size for a slightly larger button */
16 16   cursor: pointer;
17 17   position: relative;
18 18   overflow: hidden;
... ... @@ -21,7 +21,7 @@
21 21  
22 22   /* Styling for the button hover effect */
23 23   .login-btn:hover {
24 - background-color: #F2F2F2; /* Lighter shade of grey on hover */
23 + background-color: #ccc; /* Lighter shade of grey on hover */
25 25   }
26 26  
27 27   /* Styling for the button before animation */
... ... @@ -32,8 +32,8 @@
32 32   left: 50%;
33 33   width: 300%;
34 34   height: 300%;
35 - background-color: #878787;
36 - transition: all 0.3s ease;
34 + background-color: rgba(255, 255, 255, 0.1);
35 + transition: all 0.5s ease;
37 37   border-radius: 50%;
38 38   z-index: 0;
39 39   transform: translate(-50%, -50%);
... ... @@ -41,8 +41,8 @@
41 41  
42 42   /* Animation when button is clicked */
43 43   .login-btn.clicked:before {
44 - width: 50%%;
45 - height: 50%;
43 + width: 0;
44 + height: 0;
46 46   opacity: 0;
47 47   }
48 48  
... ... @@ -51,52 +51,50 @@
51 51   position: relative;
52 52   z-index: 1;
53 53   }
53 +/* Styling for the button */
54 + .login-btn {
55 + display: inline-block;
56 + padding: 10px 20px;
57 + background-color: #007bff;
58 + color: #fff;
59 + border: none;
60 + border-radius: 5px;
61 + font-size: 16px;
62 + cursor: pointer;
63 + position: relative;
64 + overflow: hidden;
65 + transition: all 0.3s ease;
66 + }
54 54  
55 -/* Styling for the smaller button */
56 -.small-login-btn {
57 - display: inline-block;
58 - padding: 12px 24px; /* Reduced padding for a smaller button */
59 - background-color: #D9D9D9; /* Grijs (formulier - header) */
60 - color: #000; /* Text color */
61 - border: none;
62 - border-radius: 5px;
63 - font-size: 18px; /* Reduced font size for a smaller button */
64 - cursor: pointer;
65 - position: relative;
66 - overflow: hidden;
67 - transition: all 0.3s ease;
68 -}
68 + /* Styling for the button hover effect */
69 + .login-btn:hover {
70 + background-color: #0056b3;
71 + }
69 69  
70 -/* Styling for the smaller button hover effect */
71 -.small-login-btn:hover {
72 - background-color: #F2F2F2; /* Lighter shade of grey on hover */
73 -}
73 + /* Styling for the button before animation */
74 + .login-btn:before {
75 + content: "";
76 + position: absolute;
77 + top: 50%;
78 + left: 50%;
79 + width: 300%;
80 + height: 300%;
81 + background-color: rgba(255, 255, 255, 0.1);
82 + transition: all 0.5s ease;
83 + border-radius: 50%;
84 + z-index: 0;
85 + transform: translate(-50%, -50%);
86 + }
74 74  
75 -/* Styling for the smaller button before animation */
76 -.small-login-btn:before {
77 - content: "";
78 - position: absolute;
79 - top: 50%;
80 - left: 50%;
81 - width: 300%;
82 - height: 300%;
83 - background-color: #878787;
84 - transition: all 0.3s ease;
85 - border-radius: 50%;
86 - z-index: 0;
87 - transform: translate(-50%, -50%);
88 -}
88 + /* Animation when button is clicked */
89 + .login-btn.clicked:before {
90 + width: 0;
91 + height: 0;
92 + opacity: 0;
93 + }
89 89  
90 -/* Animation when smaller button is clicked */
91 -.small-login-btn.clicked:before {
92 - width: 50%%;
93 - height: 50%;
94 - opacity: 0;
95 -}
96 -
97 -/* Styling for the smaller button text */
98 -.small-login-btn span {
99 - position: relative;
100 - z-index: 1;
101 -}
95 + /* Styling for the button text */
96 + .login-btn span {
97 + position: relative;
98 + z-index: 1;
102 102   }