commit 1aea4b0cd84f8db110b44cac08a8fd19f9b6132f Author: Powermacintosh Date: Sat Apr 4 21:05:55 2026 +0300 init: добавить коллекцию интерактивных кнопок и общий README — Добавлены эффекты Shadow Hover (минимализм) — Добавлены кнопки Glowing Neon (футуризм) — Добавлена анимация Mail Button (Material Design) — Создана таблица навигации в корневом README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..c403f9d --- /dev/null +++ b/README.md @@ -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** (Все анимации работают без скриптов) diff --git a/glowing-neon/README.md b/glowing-neon/README.md new file mode 100755 index 0000000..7813746 --- /dev/null +++ b/glowing-neon/README.md @@ -0,0 +1,9 @@ +# Glowing Buttons Collection + +Коллекция кнопок с эффектом неонового свечения (Glow Effect). + +### Характеристики: + +- **Технологии:** HTML5, CSS3 (Custom Properties). +- **Сложность:** Средняя (используются сложные переходы и фильтры). +- **Применение:** Идеально подходит для футуристичных интерфейсов и игровых сайдбаров. diff --git a/glowing-neon/src/index.html b/glowing-neon/src/index.html new file mode 100755 index 0000000..e9e153d --- /dev/null +++ b/glowing-neon/src/index.html @@ -0,0 +1,35 @@ + + + + + CodePen - Glowing buttons + + + + + + + + + + + Neon button + + + + + + + Neon button + + + + + + + Neon button + + + + + diff --git a/glowing-neon/src/style.css b/glowing-neon/src/style.css new file mode 100755 index 0000000..86ac0e6 --- /dev/null +++ b/glowing-neon/src/style.css @@ -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%; + } +} \ No newline at end of file diff --git a/mail-animation/README.md b/mail-animation/README.md new file mode 100755 index 0000000..bf48e5f --- /dev/null +++ b/mail-animation/README.md @@ -0,0 +1,14 @@ +# Animated CSS Mail Button + +Анимированная кнопка отправки почты в стиле **Material Design**. Полностью реализована на чистом CSS без использования JavaScript или внешних графических библиотек. + +### Особенности + +- **Pure CSS**: Вся логика анимации (превращение конверта) написана на стандартных свойствах CSS. +- **Flat UI**: Минималистичный дизайн, который легко впишется в современный интерфейс. +- **Micro-interaction**: Плавный переход состояний при наведении (hover). + +### Технологии + +- HTML5 +- CSS3 (Transitions, Transforms) diff --git a/mail-animation/src/index.html b/mail-animation/src/index.html new file mode 100755 index 0000000..90a117c --- /dev/null +++ b/mail-animation/src/index.html @@ -0,0 +1,30 @@ + + + + + CodePen - Animated CSS Mail Button + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/mail-animation/src/style.css b/mail-animation/src/style.css new file mode 100755 index 0000000..d535978 --- /dev/null +++ b/mail-animation/src/style.css @@ -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; +} \ No newline at end of file diff --git a/mail-animation/src/style.scss b/mail-animation/src/style.scss new file mode 100755 index 0000000..5417690 --- /dev/null +++ b/mail-animation/src/style.scss @@ -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; + } + } \ No newline at end of file diff --git a/shadow-hover-effects/README.md b/shadow-hover-effects/README.md new file mode 100755 index 0000000..6cb99e9 --- /dev/null +++ b/shadow-hover-effects/README.md @@ -0,0 +1,9 @@ +# Shadow Hover Effects + +Коллекция базовых анимаций кнопок с использованием `box-shadow`. + +### Особенности: + +- Только чистый CSS. +- Не требуются дополнительные HTML-элементы или псевдоэлементы (`::before`, `::after`). +- Легко адаптируется под любой UI-кит или сайдбар. diff --git a/shadow-hover-effects/src/index.html b/shadow-hover-effects/src/index.html new file mode 100755 index 0000000..2673c4b --- /dev/null +++ b/shadow-hover-effects/src/index.html @@ -0,0 +1,25 @@ + + + + + CodePen - Button hover effects with box-shadow + + + + + + +
+

Simple hover effects with box-shadow

+ + + + + + + +
+ + + + diff --git a/shadow-hover-effects/src/style.css b/shadow-hover-effects/src/style.css new file mode 100755 index 0000000..c010497 --- /dev/null +++ b/shadow-hover-effects/src/style.css @@ -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; +}