init: добавить коллекцию интерактивных кнопок и общий README
— Добавлены эффекты Shadow Hover (минимализм) — Добавлены кнопки Glowing Neon (футуризм) — Добавлена анимация Mail Button (Material Design) — Создана таблица навигации в корневом README.md
This commit is contained in:
@@ -0,0 +1,17 @@
|
|||||||
|
# Коллекция интерактивных кнопок и эффектов
|
||||||
|
|
||||||
|
Сборник современных UI-компонентов для веб-интерфейсов. Все элементы реализованы на **Pure CSS**, что позволяет легко интегрировать их в любые шаблоны страниц и сайдбары.
|
||||||
|
|
||||||
|
## Состав коллекции
|
||||||
|
|
||||||
|
| Компонент | Стиль | Особенности |
|
||||||
|
| :---------------------------------------------- | :-------------- | :------------------------------------- |
|
||||||
|
| **[Shadow Hover](./shadow-hover-effects/src/)** | Минимализм | Эффекты `box-shadow` без лишнего HTML. |
|
||||||
|
| **[Glowing Neon](./glowing-neon/src/)** | Футуризм | Яркое неоновое свечение и градиенты. |
|
||||||
|
| **[Animated Mail](./mail-animation/src/)** | Material Design | Микро-взаимодействие с конвертом. |
|
||||||
|
|
||||||
|
## Технологии
|
||||||
|
|
||||||
|
- **HTML5** (Семантическая верстка)
|
||||||
|
- **CSS3** (Transitions, Transforms, Keyframes)
|
||||||
|
- **Zero JS** (Все анимации работают без скриптов)
|
||||||
Executable
+9
@@ -0,0 +1,9 @@
|
|||||||
|
# Glowing Buttons Collection
|
||||||
|
|
||||||
|
Коллекция кнопок с эффектом неонового свечения (Glow Effect).
|
||||||
|
|
||||||
|
### Характеристики:
|
||||||
|
|
||||||
|
- **Технологии:** HTML5, CSS3 (Custom Properties).
|
||||||
|
- **Сложность:** Средняя (используются сложные переходы и фильтры).
|
||||||
|
- **Применение:** Идеально подходит для футуристичных интерфейсов и игровых сайдбаров.
|
||||||
Executable
+35
@@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>CodePen - Glowing buttons</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- partial:index.partial.html -->
|
||||||
|
<a href="#">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
Neon button
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
Neon button
|
||||||
|
</a>
|
||||||
|
<a href="#">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
Neon button
|
||||||
|
</a>
|
||||||
|
<!-- partial -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Executable
+117
@@ -0,0 +1,117 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
background: #050801;
|
||||||
|
font-family: 'Raleway', sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 25px 30px;
|
||||||
|
margin: 40px 0;
|
||||||
|
color: #03e9f4;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: 0.5s;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
a:hover{
|
||||||
|
background: #03e9f4;
|
||||||
|
color: #050801;
|
||||||
|
box-shadow: 0 0 5px #03e9f4,
|
||||||
|
0 0 25px #03e9f4,
|
||||||
|
0 0 50px #03e9f4,
|
||||||
|
0 0 200px #03e9f4;
|
||||||
|
-webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
|
||||||
|
}
|
||||||
|
a:nth-child(1){
|
||||||
|
filter: hue-rotate(270deg);
|
||||||
|
}
|
||||||
|
a:nth-child(2){
|
||||||
|
filter: hue-rotate(110deg);
|
||||||
|
}
|
||||||
|
a span{
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
a span:nth-child(1){
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg,transparent,#03e9f4);
|
||||||
|
animation: animate1 1s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes animate1{
|
||||||
|
0%{
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
50%,100%{
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a span:nth-child(2){
|
||||||
|
top: -100%;
|
||||||
|
right: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(180deg,transparent,#03e9f4);
|
||||||
|
animation: animate2 1s linear infinite;
|
||||||
|
animation-delay: 0.25s;
|
||||||
|
}
|
||||||
|
@keyframes animate2{
|
||||||
|
0%{
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
50%,100%{
|
||||||
|
top: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a span:nth-child(3){
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(270deg,transparent,#03e9f4);
|
||||||
|
animation: animate3 1s linear infinite;
|
||||||
|
animation-delay: 0.50s;
|
||||||
|
}
|
||||||
|
@keyframes animate3{
|
||||||
|
0%{
|
||||||
|
right: -100%;
|
||||||
|
}
|
||||||
|
50%,100%{
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a span:nth-child(4){
|
||||||
|
bottom: -100%;
|
||||||
|
left: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(360deg,transparent,#03e9f4);
|
||||||
|
animation: animate4 1s linear infinite;
|
||||||
|
animation-delay: 0.75s;
|
||||||
|
}
|
||||||
|
@keyframes animate4{
|
||||||
|
0%{
|
||||||
|
bottom: -100%;
|
||||||
|
}
|
||||||
|
50%,100%{
|
||||||
|
bottom: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
Executable
+14
@@ -0,0 +1,14 @@
|
|||||||
|
# Animated CSS Mail Button
|
||||||
|
|
||||||
|
Анимированная кнопка отправки почты в стиле **Material Design**. Полностью реализована на чистом CSS без использования JavaScript или внешних графических библиотек.
|
||||||
|
|
||||||
|
### Особенности
|
||||||
|
|
||||||
|
- **Pure CSS**: Вся логика анимации (превращение конверта) написана на стандартных свойствах CSS.
|
||||||
|
- **Flat UI**: Минималистичный дизайн, который легко впишется в современный интерфейс.
|
||||||
|
- **Micro-interaction**: Плавный переход состояний при наведении (hover).
|
||||||
|
|
||||||
|
### Технологии
|
||||||
|
|
||||||
|
- HTML5
|
||||||
|
- CSS3 (Transitions, Transforms)
|
||||||
Executable
+30
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>CodePen - Animated CSS Mail Button</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- partial:index.partial.html -->
|
||||||
|
<div class="letter-image">
|
||||||
|
<div class="animated-mail">
|
||||||
|
<div class="back-fold"></div>
|
||||||
|
<div class="letter">
|
||||||
|
<div class="letter-border"></div>
|
||||||
|
<div class="letter-title"></div>
|
||||||
|
<div class="letter-context"></div>
|
||||||
|
<div class="letter-stamp">
|
||||||
|
<div class="letter-stamp-inner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="top-fold"></div>
|
||||||
|
<div class="body"></div>
|
||||||
|
<div class="left-fold"></div>
|
||||||
|
</div>
|
||||||
|
<div class="shadow"></div>
|
||||||
|
</div>
|
||||||
|
<!-- partial -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Executable
+146
@@ -0,0 +1,146 @@
|
|||||||
|
body {
|
||||||
|
background: #323641;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-image {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
-webkit-transform: translate(-50%, -50%);
|
||||||
|
-moz-transform: translate(-50%, -50%);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-mail {
|
||||||
|
position: absolute;
|
||||||
|
height: 150px;
|
||||||
|
width: 200px;
|
||||||
|
-webkit-transition: 0.4s;
|
||||||
|
-moz-transition: 0.4s;
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
.animated-mail .body {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 0 100px 200px;
|
||||||
|
border-color: transparent transparent #e95f55 transparent;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.animated-mail .top-fold {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 50px 100px 0 100px;
|
||||||
|
-webkit-transform-origin: 50% 0%;
|
||||||
|
-webkit-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
|
||||||
|
-moz-transform-origin: 50% 0%;
|
||||||
|
-moz-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
|
||||||
|
transform-origin: 50% 0%;
|
||||||
|
transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
|
||||||
|
border-color: #cf4a43 transparent transparent transparent;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.animated-mail .back-fold {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
|
background: #cf4a43;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.animated-mail .left-fold {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 50px 0 50px 100px;
|
||||||
|
border-color: transparent transparent transparent #e15349;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.animated-mail .letter {
|
||||||
|
left: 20px;
|
||||||
|
bottom: 0px;
|
||||||
|
position: absolute;
|
||||||
|
width: 160px;
|
||||||
|
height: 60px;
|
||||||
|
background: white;
|
||||||
|
z-index: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-transition: 0.4s 0.2s;
|
||||||
|
-moz-transition: 0.4s 0.2s;
|
||||||
|
transition: 0.4s 0.2s;
|
||||||
|
}
|
||||||
|
.animated-mail .letter .letter-border {
|
||||||
|
height: 10px;
|
||||||
|
width: 100%;
|
||||||
|
background: repeating-linear-gradient(-45deg, #cb5a5e, #cb5a5e 8px, transparent 8px, transparent 18px);
|
||||||
|
}
|
||||||
|
.animated-mail .letter .letter-title {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 5px;
|
||||||
|
height: 10px;
|
||||||
|
width: 40%;
|
||||||
|
background: #cb5a5e;
|
||||||
|
}
|
||||||
|
.animated-mail .letter .letter-context {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 5px;
|
||||||
|
height: 10px;
|
||||||
|
width: 20%;
|
||||||
|
background: #cb5a5e;
|
||||||
|
}
|
||||||
|
.animated-mail .letter .letter-stamp {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-left: 120px;
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
background: #cb5a5e;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
position: absolute;
|
||||||
|
top: 200px;
|
||||||
|
left: 50%;
|
||||||
|
width: 400px;
|
||||||
|
height: 30px;
|
||||||
|
transition: 0.4s;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
-webkit-transition: 0.4s;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
-moz-transition: 0.4s;
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
border-radius: 100%;
|
||||||
|
background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-image:hover .animated-mail {
|
||||||
|
transform: translateY(50px);
|
||||||
|
-webkit-transform: translateY(50px);
|
||||||
|
-moz-transform: translateY(50px);
|
||||||
|
}
|
||||||
|
.letter-image:hover .animated-mail .top-fold {
|
||||||
|
transition: transform 0.4s, z-index 0.2s;
|
||||||
|
transform: rotateX(180deg);
|
||||||
|
-webkit-transition: transform 0.4s, z-index 0.2s;
|
||||||
|
-webkit-transform: rotateX(180deg);
|
||||||
|
-moz-transition: transform 0.4s, z-index 0.2s;
|
||||||
|
-moz-transform: rotateX(180deg);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.letter-image:hover .animated-mail .letter {
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
.letter-image:hover .shadow {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
Executable
+166
@@ -0,0 +1,166 @@
|
|||||||
|
body {
|
||||||
|
background: #323641;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-image {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
-webkit-transform: translate(-50%, -50%);
|
||||||
|
-moz-transform: translate(-50%, -50%);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-mail {
|
||||||
|
position: absolute;
|
||||||
|
height: 150px;
|
||||||
|
width: 200px;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
-moz-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
|
|
||||||
|
.body {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 0 100px 200px;
|
||||||
|
border-color: transparent transparent #e95f55 transparent;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-fold {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 50px 100px 0 100px;
|
||||||
|
-webkit-transform-origin: 50% 0%;
|
||||||
|
-webkit-transition: transform .4s .4s, z-index .2s .4s;
|
||||||
|
-moz-transform-origin: 50% 0%;
|
||||||
|
-moz-transition: transform .4s .4s, z-index .2s .4s;
|
||||||
|
transform-origin: 50% 0%;
|
||||||
|
transition: transform .4s .4s, z-index .2s .4s;
|
||||||
|
border-color: #cf4a43 transparent transparent transparent;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-fold {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 200px;
|
||||||
|
height: 100px;
|
||||||
|
background: #cf4a43;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-fold {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 50px 0 50px 100px;
|
||||||
|
border-color: transparent transparent transparent #e15349;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter {
|
||||||
|
left: 20px;
|
||||||
|
bottom: 0px;
|
||||||
|
position: absolute;
|
||||||
|
width: 160px;
|
||||||
|
height: 60px;
|
||||||
|
background: white;
|
||||||
|
z-index: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-transition: .4s .2s;
|
||||||
|
-moz-transition: .4s .2s;
|
||||||
|
transition: .4s .2s;
|
||||||
|
|
||||||
|
.letter-border {
|
||||||
|
height: 10px;
|
||||||
|
width: 100%;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
#cb5a5e,
|
||||||
|
#cb5a5e 8px,
|
||||||
|
transparent 8px,
|
||||||
|
transparent 18px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-title {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 5px;
|
||||||
|
height: 10px;
|
||||||
|
width: 40%;
|
||||||
|
background: #cb5a5e;
|
||||||
|
}
|
||||||
|
.letter-context {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 5px;
|
||||||
|
height: 10px;
|
||||||
|
width: 20%;
|
||||||
|
background: #cb5a5e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-stamp {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-left: 120px;
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
background: #cb5a5e;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
position: absolute;
|
||||||
|
top: 200px;
|
||||||
|
left: 50%;
|
||||||
|
width: 400px;
|
||||||
|
height: 30px;
|
||||||
|
transition: .4s;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
-moz-transition: .4s;
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
|
||||||
|
border-radius: 100%;
|
||||||
|
background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-image:hover {
|
||||||
|
.animated-mail {
|
||||||
|
transform: translateY(50px);
|
||||||
|
-webkit-transform: translateY(50px);
|
||||||
|
-moz-transform: translateY(50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-mail .top-fold {
|
||||||
|
transition: transform .4s, z-index .2s;
|
||||||
|
transform: rotateX(180deg);
|
||||||
|
-webkit-transition: transform .4s, z-index .2s;
|
||||||
|
-webkit-transform: rotateX(180deg);
|
||||||
|
-moz-transition: transform .4s, z-index .2s;
|
||||||
|
-moz-transform: rotateX(180deg);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated-mail .letter {
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Executable
+9
@@ -0,0 +1,9 @@
|
|||||||
|
# Shadow Hover Effects
|
||||||
|
|
||||||
|
Коллекция базовых анимаций кнопок с использованием `box-shadow`.
|
||||||
|
|
||||||
|
### Особенности:
|
||||||
|
|
||||||
|
- Только чистый CSS.
|
||||||
|
- Не требуются дополнительные HTML-элементы или псевдоэлементы (`::before`, `::after`).
|
||||||
|
- Легко адаптируется под любой UI-кит или сайдбар.
|
||||||
Executable
+25
@@ -0,0 +1,25 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>CodePen - Button hover effects with box-shadow</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- partial:index.partial.html -->
|
||||||
|
<div class="buttons">
|
||||||
|
<h1>Simple hover effects with <code>box-shadow</code></h1>
|
||||||
|
<button class="fill">Fill In</button>
|
||||||
|
<button class="pulse">Pulse</button>
|
||||||
|
<button class="close">Close</button>
|
||||||
|
<button class="raise">Raise</button>
|
||||||
|
<button class="up">Fill Up</button>
|
||||||
|
<button class="slide">Slide</button>
|
||||||
|
<button class="offset">Offset</button>
|
||||||
|
</div>
|
||||||
|
<!-- partial -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Executable
+134
@@ -0,0 +1,134 @@
|
|||||||
|
.fill:hover,
|
||||||
|
.fill:focus {
|
||||||
|
box-shadow: inset 0 0 0 2em var(--hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse:hover,
|
||||||
|
.pulse:focus {
|
||||||
|
-webkit-animation: pulse 1s;
|
||||||
|
animation: pulse 1s;
|
||||||
|
box-shadow: 0 0 0 2em transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes pulse {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0 0 var(--hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0 0 var(--hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.close:hover,
|
||||||
|
.close:focus {
|
||||||
|
box-shadow:
|
||||||
|
inset -3.5em 0 0 0 var(--hover),
|
||||||
|
inset 3.5em 0 0 0 var(--hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.raise:hover,
|
||||||
|
.raise:focus {
|
||||||
|
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
|
||||||
|
transform: translateY(-0.25em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.up:hover,
|
||||||
|
.up:focus {
|
||||||
|
box-shadow: inset 0 -3.25em 0 0 var(--hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide:hover,
|
||||||
|
.slide:focus {
|
||||||
|
box-shadow: inset 6.5em 0 0 0 var(--hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.offset {
|
||||||
|
box-shadow:
|
||||||
|
0.3em 0.3em 0 0 var(--color),
|
||||||
|
inset 0.3em 0.3em 0 0 var(--color);
|
||||||
|
}
|
||||||
|
.offset:hover,
|
||||||
|
.offset:focus {
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 0 var(--hover),
|
||||||
|
inset 6em 3.5em 0 0 var(--hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill {
|
||||||
|
--color: #a972cb;
|
||||||
|
--hover: #cb72aa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse {
|
||||||
|
--color: #ef6eae;
|
||||||
|
--hover: #ef8f6e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
--color: #ff7f82;
|
||||||
|
--hover: #ffdc7f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raise {
|
||||||
|
--color: #ffa260;
|
||||||
|
--hover: #e5ff60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.up {
|
||||||
|
--color: #e4cb58;
|
||||||
|
--hover: #94e458;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide {
|
||||||
|
--color: #8fc866;
|
||||||
|
--hover: #66c887;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offset {
|
||||||
|
--color: #19bc8b;
|
||||||
|
--hover: #1973bc;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: var(--color);
|
||||||
|
transition: 0.25s;
|
||||||
|
}
|
||||||
|
button:hover,
|
||||||
|
button:focus {
|
||||||
|
border-color: var(--hover);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #fff;
|
||||||
|
background: #17181c;
|
||||||
|
font:
|
||||||
|
300 1em "Fira Sans",
|
||||||
|
sans-serif;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: none;
|
||||||
|
border: 2px solid;
|
||||||
|
font: inherit;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0.5em;
|
||||||
|
padding: 1em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: #e4cb58;
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user