F. css / md-filled-button.css

1
/* container */
2
.md-filled-button::before {
3
 content: "";
4
 position: absolute;
5
 z-index: -2;
6
 top: 0;
7
 right: 0;
8
 left: 0;
9
 bottom: 0;
10
 background-color: var(--md-sys-color-primary);
11
}
12

  
13
/* state layer */

  
14
.md-filled-button::after {

  
15
 content: "";

  
16
 position: absolute;

  
17
 z-index: -1;

  
18
 top: 0;

  
19
 right: 0;

  
20
 left: 0;

  
21
 bottom: 0;

  
22
 background-color: transparent;

  
23
}

  
24

  
25
/* label, shape */

  
26
.md-filled-button {

  
27
 position: relative;

  
28
 box-sizing: border-box;

  
29
 border-radius: 1.25rem;

  
30
 height: 2.5rem;

  
31
 line-height: 2.5rem;

  
32
 padding: 0 1.5rem;

  
33
 border: none;

  
34
 background-color: transparent;

  
35
 box-shadow: var(--md-box_shadow_level0);

  
36
 font-family: var(--md-sys-typescale-label-large-font);

  
37
 font-weight: var(--md-sys-typescale-label-large-weight);

  
38
 font-size: var(--md-sys-typescale-label-large-size);

  
39
 font-style: var(--md-sys-typescale-label-large-font-style);

  
40
 letter-spacing: var(--md-sys-typescale-label-large-tracking);

  
41
 text-transform: var(--md-sys-typescale-label-large-text-transform);

  
42
 text-decoration: var(--md-sys-typescale-label-large-text-decoration);

  
43
 color: var(--md-sys-color-on-primary);

  
44
 white-space: nowrap;

  
45
 text-overflow: ellipsis;

  
46
 overflow: hidden;

  
47
}

  
48

  
49
/* label, shape */

  
50
.md-filled-button:hover {

  
51
 color: var(--md-sys-color-on-primary);

  
52
 box-shadow: var(--md-box_shadow_level1);

  
53
}

  
54

  
55
/* state layer */

  
56
.md-filled-button:hover::after {

  
57
 background-color: var(--md-sys-color-on-primary);

  
58
 opacity: var(--md-sys-state-hover-state-layer-opacity);

  
59
}

  
60

  
61
/* label, shape */

  
62
.md-filled-button:focus {

  
63
 outline: none;

  
64
 color: var(--md-sys-color-on-primary);

  
65
 box-shadow: var(--md-box_shadow_level0) !important;

  
66
}

  
67

  
68
/* state layer */

  
69
.md-filled-button:focus::after {

  
70
 background-color: var(--md-sys-color-on-primary);

  
71
 opacity: var(--md-sys-state-focus-state-layer-opacity);

  
72
}

  
73

  
74
/* label, shape */

  
75
.md-filled-button:active {

  
76
 color: var(--md-sys-color-on-primary);

  
77
 background-position: center;

  
78
 background-image:

  
79
  radial-gradient(circle, var(--md-sys-color-on-primary-container) 1%, transparent 1%);

  
80
 background-size: 100%;

  
81
 animation-name: md-ripple;

  
82
 animation-duration: var(--md-sys-motion-duration-500);

  
83
 box-shadow: var(--md-box_shadow_level0) !important;

  
84
}

  
85

  
86
/* state layer */

  
87
.md-filled-button:active::after {

  
88
 background-color: var(--md-sys-color-on-primary);

  
89
 opacity: var(--md-sys-state-pressed-state-layer-opacity);

  
90
}

  
91

  
92
/* label, shape */

  
93
.md-filled-button:disabled {

  
94
 background-color: transparent !important;

  
95
 color: var(--md-sys-color-on-surface) !important;

  
96
 opacity: 0.38 !important;

  
97
 box-shadow: var(--md-box_shadow_level0) !important;

  
98
}

  
99

  
100
/* container */

  
101
.md-filled-button:disabled::before {

  
102
 background-color: var(--md-sys-color-on-surface) !important;

  
103
 opacity: 0.12 !important;

  
104
}

  
105

  
106
/* state layer */

  
107
.md-filled-button:disabled::after {

  
108
 background-color: transparent !important;

  
109
 opacity: 1 !important;

  
110
}

 


 
 
 
     skip_previous
    
 
     skip_next