Materialize CSS
  Prev Page
Next Page  
Materialize Pulse
Materialize CSS Pulse buttons with captivating effect. Add the pulse class to your button. 
Note: This is meant for floating buttons, so it may not work perfectly with every component.
Pulse HTML Structure
<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>
Output :
Materialize Sass

Materialize CSS Sass are mainly two types there are Variables and Media Queries.

Variables

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,...
Media Queries

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
Sass
@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
}
  Prev Page
Next Page