/
githubmirror
/
50projects50days
Обзор
Документация
Войти
/
githubmirror
/
50projects50days
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
button-ripple-effect/style.css
51 строка
908 B
Brad Traversy
Button ripple effect
26 окт 2020, 17:40
26 окт 2020, 17:40
fb5469b
Код
Авторство
О чём код?
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #000; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } button { background-color: purple; color: #fff; border: 1px purple solid; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; padding: 20px 30px; overflow: hidden; margin: 10px 0; position: relative; } button:focus { outline: none; } button .circle { position: absolute; background-color: #fff; width: 100px; height: 100px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: scale 0.5s ease-out; } @keyframes scale { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } }