1.notification {
2  width: 250px;
3  height: 60px;
4  color: black;
5  background: white;
6  border-radius: 3px;
7  display: grid;
8  grid-auto-flow: column;
9  align-items: center;
10  justify-items: center;
11  -webkit-animation-name: pulse;
12  animation-name: pulse;
13  -webkit-animation-duration: 1s;
14  animation-duration: 1s;
15  -webkit-animation-fill-mode: both;
16  animation-fill-mode: both;
17  animation-iteration-count: infinite;
18  border: 3px solid #ece0b4;
19}
20
21.notification:hover  button.ff3 {
22  background-color: #f4e0a6;
23}
24
25.notification:hover {
26  border-color: #f4e0a6;
27}
28
29.notification:hover .lvl {
30  border-color: #f4e0a6;
31}
32
33button.ff3 {
34  background-color: #ece0b4;
35  height: 100%;
36  display: flex;
37  align-items: center;
38  width: 100%;
39  justify-content: center;
40  flex-direction: column;
41  gap: 3px;
42  cursor: pointer;
43  border: 0;
44  transition: .5s;
45  font-weight: bold;
46}
47
48.lvl {
49  background: white;
50  padding: 6px;
51  border-radius: 100px;
52  border: 3px solid #ece0b4;
53  position: absolute;
54  left: -10px;
55  transform: scale(.8);
56  top: -10px;
57}
58
59@-webkit-keyframes pulse {
60  0% {
61    -webkit-transform: scale3d(1, 1, 1);
62    transform: scale3d(1, 1, 1);
63  }
64
65  50% {
66    -webkit-transform: scale3d(1.05, 1.05, 1.05);
67    transform: scale3d(1.05, 1.05, 1.05);
68  }
69
70  100% {
71    -webkit-transform: scale3d(1, 1, 1);
72    transform: scale3d(1, 1, 1);
73  }
74}
75
76@keyframes pulse {
77  0% {
78    -webkit-transform: scale3d(1, 1, 1);
79    transform: scale3d(1, 1, 1);
80  }
81
82  50% {
83    -webkit-transform: scale3d(1.05, 1.05, 1.05);
84    transform: scale3d(1.05, 1.05, 1.05);
85  }
86
87  100% {
88    -webkit-transform: scale3d(1, 1, 1);
89    transform: scale3d(1, 1, 1);
90  }
91} 
92