init: добавить коллекцию интерактивных кнопок и общий README
— Добавлены эффекты Shadow Hover (минимализм) — Добавлены кнопки Glowing Neon (футуризм) — Добавлена анимация Mail Button (Material Design) — Создана таблица навигации в корневом README.md
This commit is contained in:
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user