maelkmark.github.io/global.css at master · MaelkMark/maelkmark.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*, *::before, *::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: 'Prompt';
	scrollbar-color: #24242d #111;
	scrollbar-width: thin;
}

:root {
	--background: #1a1a20;
	--color: #eee;
	--gradient: linear-gradient(30deg,#2482f5 0%, #06cecc 72.1%);
	--gradient-reverse: linear-gradient(330deg,#2482f5 0%, #06cecc 100%);
}

body {
	background: var(--background);
	color: var(--color);
}

.button {

	--x: 50%;
	--y: 50%;

	cursor: none;
	transition: 0.2s;
	display: inline-block;
	position: relative;
	font-weight: bold;
	text-decoration: none;
	font-size: 0.5em;
	padding: 0.4em 0;
	border-radius: 200px;
	text-wrap: nowrap;

	&:hover {
		scale: 1.05;
	}


	&::before {
		content: attr(text);
		color: var(--background);
		padding: 0.4em 1em;
		border-radius: 200px;
		background: var(--gradient-reverse);
	}

	&::after {
		content: attr(text);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: var(--color);
		clip-path: circle(.8em at var(--x) var(--y));
		backdrop-filter: brightness(1.2);
		border-radius: 200px;
		opacity: 0;
		padding: 0.4em 1em;
	}

	&:hover::after {
		opacity: 1;
	}

	&:active::after {
		transition: 0.15s;
		clip-path: circle(150% at var(--x) var(--y));
	}

	&.ghost {
		background: var(--gradient);
		padding: 0.5em .1em;

		&::before {
			background-color: var(--background);
			background-image: none;
			color: var(--color);
			transition: 0.2s background-color;
		}

		&:hover::before {
			background-color: var(--background)00;
		}

		&::after {
			color: var(--background);
			padding: 0.5em 1.1em;
		}
	}
}