.button { text-align: center;border: 1px solid transparent;padding: 4px 48px;font-size: 17px;border-radius: 4px;cursor: pointer;}.blue{ color: #fff; background-color: #0090e7; border-color: #0090e7; } .blue:hover{ color: #fff; background-color: #0078c1; border-color: #0070b4; } .blue:focus { color: #fff; background-color: #0078c1; border-color: #0070b4; box-shadow: 0 0 0 0.2rem rgba(38, 161, 235, 0.5); } .gray { color: #212529; background-color: #e4eaec; border-color: #e4eaec; } .gray:hover { color: #212529; background-color: #ced9dc; border-color: #c6d3d7; } .gray:focus { color: #212529; background-color: #ced9dc; border-color: #c6d3d7; box-shadow: 0 0 0 0.2rem rgba(199, 204, 207, 0.5); } .green { color: #fff; background-color: #00d25b; border-color: #00d25b; } .green:hover { color: #fff; background-color: #00ac4a; border-color: #009f45; } .green:focus { color: #fff; background-color: #00ac4a; border-color: #009f45; box-shadow: 0 0 0 0.2rem rgba(38, 217, 116, 0.5); }.red { color: #fff; background-color: #fc424a; border-color: #fc424a; } .red:hover { color: #fff; background-color: #fb1c26; border-color: #fb101a; } .red:focus { color: #fff; background-color: #fb1c26; border-color: #fb101a; box-shadow: 0 0 0 0.2rem rgba(252, 94, 101, 0.5); }.purple { color: #fff; background-color: #8f5fe8; border-color: #8f5fe8; } .purple:hover { color: #fff; background-color: #783ee3; border-color: #7032e2; } .purple:focus { color: #fff; background-color: #783ee3; border-color: #7032e2; box-shadow: 0 0 0 0.2rem rgba(160, 119, 235, 0.5); } .orange { color: #212529; background-color: #ffab00; border-color: #ffab00; } .orange:hover { color: #212529; background-color: #d99100; border-color: #cc8900; } .orange:focus{ color: #212529; background-color: #d99100; border-color: #cc8900; box-shadow: 0 0 0 0.2rem rgba(222, 151, 6, 0.5); }.white { color: #212529; background-color: #ffffff; border-color: #ffffff; } .white:hover { color: #212529; background-color: #ececec; border-color: #e6e6e6; } .white:focus { color: #212529; background-color: #ececec; border-color: #e6e6e6; box-shadow: 0 0 0 0.2rem rgba(222, 222, 223, 0.5); } .dark { color: #fff; background-color: #0d0d0d; border-color: #0d0d0d; } .dark:hover { color: #fff; background-color: black; border-color: black; } .dark:focus { color: #fff; background-color: black; border-color: black; box-shadow: 0 0 0 0.2rem rgba(49, 49, 49, 0.5); }.link {background-color: transparent;color: #007bff; text-decoration: none; } .link:hover { color: #0056b3; text-decoration: underline; } .link:focus { text-decoration: underline; }