Changes for page Home

Last modified by Jesse Veentjer on 06-5-2024 05:01
From version 219.8
edited by Jesse Veentjer
on 15-2-2024 04:35
Change comment: There is no comment for this version
To version 219.19
edited by Jesse Veentjer
on 15-2-2024 05:16
Change comment: There is no comment for this version

Summary

Details

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