#mdl-button--fab {
border-radius: 50%;
font-size: 24px;
height: 56px;
margin: auto;
min-width: 56px;
width: 56px;
padding: 0;
overflow: hidden;
background: rgba(158,158,158, 0.20);
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
position: relative;
line-height: normal; }
.mdl-button--fab .material-icons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-12px, -12px);
transform: translate(-12px, -12px);
line-height: 24px;
width: 24px; }
.mdl-button--fab.mdl-button--mini-fab {
height: 40px;
min-width: 40px;
width: 40px; }
.mdl-button--fab .mdl-button__ripple-container {
border-radius: 50%;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
.mdl-button--fab:active {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
background-color: rgba(158,158,158, 0.40); }
.mdl-button--fab:focus:not(:active) {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
background-color: rgba(158,158,158, 0.40); }
.mdl-button--fab.mdl-button--colored {
background: rgb(255,64,129);
color: rgb(255,255,255); }
.mdl-button--fab.mdl-button--colored:hover {
background-color: rgb(255,64,129); }
.mdl-button--fab.mdl-button--colored:focus:not(:active) {
background-color: rgb(255,64,129); }
.mdl-button--fab.mdl-button--colored:active {
background-color: rgb(255,64,129); }
.mdl-button--fab.mdl-button--colored .mdl-ripple {
background: rgb(255,255,255); }[/code:2w0wjpdz]
When I load the edited material.css in my project and set the id of a button to "mdl-button--fab" it changes the form of the button to a circle as it should but it
doesn't have the colour that it should have. Also all the ripple effects that should come with the css do not appear.
The file from Material Design contains some more files such as a material.js or a material.min.js file which I don't know the use of. Maybe those need to be implemented aswell?
Editing the exported .html file hasn't worked yet either. I can't seem to find the buttons from my project in that file.
@Magistross How would the "Execute Javascript" method work? Can you explain to me how you would do that?
Thanks again for all the answers!