How to make Button style Material Design only with CSS

Question

How to make Button style Material Design only with CSS

Navigation

#1 by (4 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

5

On Android and design system Material Design it is common to see this button they call Ripple Buttom . link

ButitisdonewithJSandmyintentionistodoitwithCSSonly.IsitpossibletodosuchaneffectwithCSSonly?

Noticethatwhenbtnisclickedittriggersthisrippleeffect...

OBS:Idonotneedtheeffecttohappenwheretheclickwasmade,itcanalwayshappenfromthecenterofthebuttonout.SoIthinkit'sonlypossibletodoitwithCSSinthiscase.

ThisiswhatIhavesofar:

.btn {
    width: 200px;
    height: 160px;
    margin: auto;
    background-color: #eee;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    transition: all 200ms linear;
}
.btn:hover {
    background-color: #ddd;
}

<div class="btn">Meu Ripple</div>

html5 css css3 material-design button

asked by anonymous 18.12.2018 / 14:39

4 answers

score 4 · Answer 1

Giving a tweak in CSS manages to make a template closer than I wanted.

It activates the animation in the click, not when I release the mouse button.

Themainpointisthepseudoclass:active,alongwithapseudo-elementinthebuttonthatwillplaytheroleofripple.Andinbutton:active::afterIactivatetransitiondoingtheanimationeffect.

Ithoughttheresultwasquitesatisfactory.

button {
    border: none;
    width: 160px;
    height: 140px;
    font-size: 16px;
    cursor: pointer;
    text-overflow: ellipsis;
    background-color: #fff;
    box-shadow: 0 0 4px #999;
    outline: none;
    overflow: hidden;
    transition: background-color 200ms linear;
    position: relative; 
}

button:hover {
    background-color: #eee;
}

button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at center, transparent, transparent);
    background-size: 1%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: background-size 900ms, opacity 150ms;
}

button:active::after {
    background-image: radial-gradient(circle at center, rgba(0,0,0,0.15) 50%, transparent 52%);
    background-size: 2000%;
    opacity: 1;
}

html, body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

<button class="ripple">Meu Ripple</button>

score 0 · Answer 2

With transition s and some calculation in the background of radial-gradient in hover .

Edit: which is basically the codepen that @Rodrigo Daoud put in the comment, had not seen before posting the answer

/* Ripple effect */
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}

/* Button style */
button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  color: white;
  background-color: #2196f3;
  box-shadow: 0 0 4px #999;
  outline: none;
}

<button class="ripple">Meu Ripple</div>

Retired from here

score 0 · Answer 3

Source: Material design ripples with CSS

button {
  position: relative;
  overflow: hidden;
  padding: 16px 32px;
}

button:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  background: #3f51b5;
  border-radius: 100%;
  opacity: .6;
  transform: scale(0);
}

@keyframes ripple {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

button:not(:active):after {
  animation: ripple 1s ease-out;
}

button:after {
  visibility: hidden;
}

button:focus:after {
  visibility: visible;
}

<button>
  Meu Ripple
</button>

score 0 · Answer 4

With a little modification in the css and html of the answer @Netinho Santos, I added a JS that causes the effect to occur from the clicked place, as well as in the material ... Unfortunately this effect can not be done with pure css, but it follows the modification for those who have an interest:

$('button').click(function(e){

  var offset = $(this).offset();
  var relativeX = (e.clientX);
  var relativeY = (e.clientY);

  $(this).find('.ripple').offset({top: relativeY, left: relativeX})

})

button {
  position: relative;
  overflow: hidden;
  padding: 16px 32px;
}

button > .ripple {
  content: '';
  display: block;
  position: absolute;

  width: 120px;
  height: 120px;

  background: #3f51b5;
  border-radius: 100%;
  opacity: .6;
  transform: scale(0);
}

@keyframes ripple {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

button:not(:active)> .ripple {
  animation: ripple 1s ease-out;
}

button > .ripple {
  visibility: hidden;
}

button:focus > .ripple {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><br><button><iclass="ripple"></i>
  Meu Ripple
</button>