chrome/browser/resources/local_ntp/animations.css

/* Copyright 2018 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

.ripple-container {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

.ripple-effect-mask {
  height: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 0;
}

.ripple-effect {
  background-color: rgba(var(--GB600-rgb), .1);
  border-radius: 50%;
  height: 1px;
  pointer-events: none;
  transition: width, height, margin, background-color 400ms 250ms;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  width: 1px;
}

@media (prefers-color-scheme: dark) {
  .ripple-effect {
    background-color: rgba(var(--GB300-rgb), .32);
  }
}

button.primary .ripple-effect {
  background-color: rgba(255, 255, 255, .32);
}

@media (prefers-color-scheme: dark) {
  button.primary .ripple-effect {
    background-color: rgba(0, 0, 0, .08);
  }
}

button.paper {
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  min-height: 32px;
  padding: 0 16px;
  position: relative;
  transition-duration: 200ms;
  transition-property: background-color, color, box-shadow, border;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

button.paper:not(:disabled) {
  cursor: pointer;
}

button.paper:disabled {
  transition: none;
}

button.paper.primary {
  background-color: rgb(var(--GB600-rgb));
  color: white;
}

@media (prefers-color-scheme: dark) {
  button.paper.primary {
    background-color: rgb(var(--GB300-rgb));
    color: rgb(var(--GG900-rgb));
  }
}

button.paper.primary:disabled {
  background-color: rgb(var(--GG100-rgb));
  color: rgb(var(--GG600-rgb));
}

@media (prefers-color-scheme: dark) {
  button.paper.primary:disabled {
    background-color: rgb(var(--GG800-rgb));
    color: rgb(var(--GG600-rgb));
  }
}

button.paper.primary:hover:not(:disabled) {
  background-color: rgb(41, 123, 231);
  box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), .3),
      0 1px 3px 1px rgba(var(--GB500-rgb), .15);
}

@media (prefers-color-scheme: dark) {
  button.paper.primary:hover:not(:disabled) {
    background-color: rgb(133, 173, 238);
  }
}

button.paper.primary:active:not(:disabled) {
  box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), .3),
      0 3px 6px 2px rgba(var(--GB500-rgb), .15);
}

@media (prefers-color-scheme: dark) {
  button.paper.primary:active:not(:disabled) {
    background-color: rgb(115, 160, 223);
    box-shadow: 0 1px 2px 0 rgba(var(--GB500-rgb), .3),
        0 3px 6px 2px rgba(var(--GB500-rgb), .15);
  }
}

button.paper.secondary {
  background-color: white;
  border: 1px solid rgb(var(--GG300-rgb));
  color: rgb(var(--GB600-rgb));
}

@media (prefers-color-scheme: dark) {
  button.paper.secondary {
    background-color: transparent;
    border-color: rgb(var(--GG700-rgb));
    color: rgb(var(--GB300-rgb));
  }
}

button.paper.secondary:disabled {
  border-color: rgb(var(--GG100-rgb));
  color: rgb(var(--GG600-rgb));
}

@media (prefers-color-scheme: dark) {
  button.paper.secondary:disabled {
    border-color: rgb(var(--GG800-rgb));
    color: rgb(var(--GG600-rgb));
  }
}

button.paper.secondary:hover:not(:disabled) {
  background-color: rgba(var(--GB500-rgb), .04);
  border-color: rgb(var(--GB100-rgb));
}

@media (prefers-color-scheme: dark) {
  button.paper.secondary:hover:not(:disabled) {
    background-color: rgba(var(--GB300-rgb), .04);
    border-color: rgba(var(--GB300-rgb), .5);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3),
        0 1px 3px 1px rgba(0, 0, 0, .15);
  }
}

button.paper.secondary:active:not(:disabled) {
  background-color: white;
  border-color: white;
  box-shadow: 0 1px 2px 0 rgba(var(--GG800-rgb), .3),
      0 3px 6px 2px rgba(var(--GG800-rgb), .15);
}

@media (prefers-color-scheme: dark) {
  button.paper.secondary:active:not(:disabled) {
    background-color: rgba(var(--GB300-rgb), .08);
    border-color: rgba(var(--GB300-rgb), .5);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3),
        0 3px 6px 2px rgba(0, 0, 0, .15);
    }
}