How can I change the container colour of a MDC button without using SASS mixins as described here. What is the actual equivalent CSS to specify to do it?
I have tried the following:
.mdc-button:after,
.mdc-button:before {
background-color: #000000
}
.mdc-button {
background-color: #000000;
}
<div class="button-container">
<button class="mdc-button mdc-button--raised foo">
Foo
</button>
<button class="mdc-button mdc-button--raised bar">
Bar
</button>
</div>
Here is the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="https://material.io/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>
<style>
.mdc-button:after,
.mdc-button:before {
background-color: #000000
}
.mdc-button {
background-color: #000000;
}
</style>
<form action="home.html">
<div class="button-container">
<button class="mdc-button mdc-button--raised log-in">
Foo
</button>
<button class="mdc-button mdc-button--raised sign-up">
Bar
</button>
</div>
</form>
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
</body>
</html>