pulse class to your button. <style type="text/css">
.m20_0{ margin:20px 0px;}
</style>
<div class="row center-align">
<div class="col s6 m3 m20_0">
<a class="btn btn-floating btn-large pulse"><i class="material-icons">menu</i></a>
</div>
<div class="col s6 m3 m20_0">
<a class="btn btn-floating btn-large light-blue pulse"><i class="material-icons">account_circle</i></a>
</div>
<div class="col s6 m3 m20_0">
<a class="btn btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>
</div>
<div class="col s6 m3 m20_0">
<a class="btn btn-floating btn-large red pulse"><i class="material-icons">notifications</i></a>
</div>
</div>Materialize CSS Sass are mainly two types there are Variables and Media Queries.
The Sass variables are used mainly you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in _variables.scss.
$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: false !default;
$primary-color-dark: false !default;
@if not $primary-color-light {
$primary-color-light: lighten($primary-color, 15%);
}
@if not $primary-color-dark {
$primary-color-dark: darken($primary-color, 15%);
}
$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;
etc,...We have 3 media queries for the 4 standard screen sizes you can use in your custom Sass files.
s : Small screens are defined as having a max-width of 600px
m : Medium screens are defined as having a max-width of 992px
l : Large screen are defined as having a min-width of 993px
xl : Extra Large screen are defined as having a min-width of 1200px
.hide-on-small-only
.hide-on-small-and-down
.hide-on-med-and-down
.hide-on-med-and-up
.hide-on-med-only
.hide-on-large-only
.show-on-large
.show-on-medium
.show-on-small
.show-on-medium-and-up
.show-on-medium-and-down@media #{$small-and-down} {
// styles for small screens and down
}
@media #{$medium-and-up} {
// styles for medium screens and larger
}
@media #{$medium-and-down} {
// styles for medium screens and down
}
@media #{$large-and-up} {
// styles for large screens and up
}
@media #{$extra-large-and-up} {
// styles for extra large screens and up
}