Changes for page Home

Summary

• Objects (1 modified, 0 added, 0 removed)
  • XWiki.StyleSheetExtension[0]

Details

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -6,22 +6,21 @@
6	6	/* Styling for the button */
7	7	.login-btn {
8	8	display: inline-block;
9		- padding: 25% 10%;
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	15	font-size: 18px; /* Increased font size for a slightly larger button */
16	16	cursor: pointer;
17		- position: center;
	16	+ position: relative;
18	18	overflow: hidden;
19		- transition: all 0.5s ease;
	18	+ transition: all 0.3s ease;
20	20	}
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,7 +32,7 @@
32	32	left: 50%;
33	33	width: 300%;
34	34	height: 300%;
35		- background-color: #878787;
	34	+ background-color: rgba(255, 255, 255, 0.1);
36	36	transition: all 0.5s ease;
37	37	border-radius: 50%;
38	38	z-index: 0;
...	...	@@ -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,4 +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;
54	54	}
	67	+
	68	+ /* Styling for the button hover effect */
	69	+ .login-btn:hover {
	70	+ background-color: #0056b3;
	71	+ }
	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	+ }
	87	+
	88	+ /* Animation when button is clicked */
	89	+ .login-btn.clicked:before {
	90	+ width: 0;
	91	+ height: 0;
	92	+ opacity: 0;
	93	+ }
	94	+
	95	+ /* Styling for the button text */
	96	+ .login-btn span {
	97	+ position: relative;
	98	+ z-index: 1;
	99	+ }