|
Простая анимация кнопок на чистом CSS3
|
|
| Kosten | Суббота, 23 Мая 2020, 19:28 | Сообщение 1 |
| Всегда кнопки на сайте украшают дизайн, но если мы установим простой стиль, но с красивой анимацией, то безусловно такой стиль эффекта будет для большинства оригинален. Как следует из названия этого набора кнопок, эти кнопки CSS просты и понятны в своем дизайне. Они предлагают скользящий цвет со всех сторон, а также заполнение от центра. Ниже приведен подборка кнопок с различными анимированными эффектами CSS, которые вы можете добавить на свой сайт с помощью довольно простого CSS.
Код <div class="wrapper">
<button class="slide_from_left">SLIDE FROM LEFT</button>
<button class="slide_from_right">SLIDE FROM RIGHT</button>
<button class="slide_from_top">SLIDE FROM TOP</button>
<button class="slide_from_bottom">SLIDE FROM BOTTOM</button>
<hr>
<button class="grow_box">GROW BOX</button>
<button class="grow_ellipse">GROW ELLIPSE</button>
<button class="grow_skew_forward">GROW SKEW →</button>
<button class="grow_skew_backward">GROW SKEW ←</button>
<button class="grow_spin">GROW SPIN</button>
</div>
CSS
Код .wrapper {
max-width: 65rem;
width: 100%;
margin: 2rem auto;
padding: 5rem;
text-align: center;
background: #fff;
border: 0.5rem solid #34495e;
}
hr {
border: 0;
border-bottom: 0.0625rem solid #bbb;
margin: 3rem 0;
}
button {
font-size: 2em;
background: #3498db;
color: #fff;
border: 0.25rem solid #3498db;
padding: 0.85em 0.75em;
margin: 1rem;
position: relative;
z-index: 1;
overflow: hidden;
}
button:hover {
color: #3498db;
}
button::after {
content: "";
background: #ecf0f1;
position: absolute;
z-index: -1;
padding: 0.85em 0.75em;
display: block;
}
button[class^="slide"]::after {
transition: all 0.35s;
}
button[class^="slide"]:hover::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all 0.35s;
}
button.slide_from_left::after {
top: 0;
bottom: 0;
left: -100%;
right: 100%;
}
button.slide_from_right::after {
top: 0;
bottom: 0;
left: 100%;
right: -100%;
}
button.slide_from_top::after {
left: 0;
right: 0;
top: -100%;
bottom: 100%;
}
button.slide_from_bottom::after {
left: 0;
right: 0;
top: 100%;
bottom: -100%;
}
button[class^="grow"]::after {
transition: all 0.3s ease;
}
button[class^="grow"]:hover::after {
transition: all 0.3s ease-out;
}
button.grow_box::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(0, 0);
}
button.grow_box:hover::after {
transform: scale(1, 1);
}
button.grow_ellipse::after {
border-radius: 50%;
left: -50%;
right: -50%;
top: -150%;
bottom: -150%;
line-height: 8.34em;
transform: scale(0, 0);
}
button.grow_ellipse:hover::after {
transform: scale(1, 1);
}
button.grow_skew_forward::after {
left: -20%;
right: -20%;
top: 0;
bottom: 0;
transform: skewX(-45deg) scale(0, 1);
}
button.grow_skew_forward:hover::after {
transform: skewX(-45deg) scale(1, 1);
}
button.grow_skew_backward::after {
left: -20%;
right: -20%;
top: 0;
bottom: 0;
transform: skewX(45deg) scale(0, 1);
}
button.grow_skew_backward:hover::after {
transform: skewX(45deg) scale(1, 1);
}
button.grow_spin::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(0, 0) rotate(-180deg);
}
button.grow_spin:hover::after {
transform: scale(1, 1) rotate(0deg);
}
На этом все кнопки представлены под выбор.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 29 Мая 2020, 21:47 | Сообщение 2 |
|
| Анимационные кнопки с HTML CSS
HTML
Код <div class="main"> <a href="#" class="a1">button</a> <a href="#" class="a2">button</a> <a href="#" class="a3">button</a> <a href="#" class="a4">button</a> <a href="#" class="a5">button</a> </div>
CSS
Код .main{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
a {
display :block;
text-decoration: none;
margin:20px;
}
/*the first button*/
.a1{
position: relative;
background: linear-gradient(to right, #03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
border-radius:30px;
width: 200px;
height: 60px;
line-height:60px;
text-align:center;
box-sizing: border-box;
text-transform: uppercase;
color:#fff;
font-size:20px;
}
.a1:hover{
animation: a 8s linear Infinite;
}
.a1:before{
content:"";
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
position: absolute;
top:-5px;
right: -5px;
left: -5px;
bottom:-5px;
z-index: -1;
border-radius:40px;
filter: blur(20px);
opacity: 0;
transition:0.5s;
}
.a1:hover:before{
opacity: 1;
filter: blur(20px);
animation: a 8s linear Infinite;
}
@keyframes a {
0%{
background-position: 0%;
}
100%{
background-position: 400%;
}
}
/*the second button*/
.a2{
position: relative;
width: 200px;
height: 60px;
line-height:60px;
text-align:center;
box-sizing: border-box;
text-transform: uppercase;
color:#fff;
font-size:20px;
border:1px solid #fff;
border-radius:30px;
transition: all 0.5s ease ;
}
.a2:before{
content:"";
position: absolute;
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width: 100%;
height: 0%;
transition:all 0.6s ease ;
z-index: -1;
border-radius:30px;
}
.a2:after{
content:"";
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
position: absolute;
top:-5px;
right: -5px;
left: -5px;
bottom:-5px;
z-index: -1;
border-radius:40px;
filter: blur(20px);
opacity: 0;
transition:0.5s;
}
.a2:hover{
border:1px solid transparent;
}
.a2:hover:before{
height: 100%;
animation: a 8s linear Infinite;
}
.a2:hover:after{
opacity: 1;
filter: blur(20px);
animation: a 8s linear Infinite;
}
/*the third button*/
.a3{
position: relative;
width: 200px;
height: 60px;
line-height:60px;
text-align:center;
box-sizing: border-box;
text-transform: uppercase;
color:#fff;
font-size:20px;
border:1px solid #fff;
border-radius:30px;
transition: all 0.5s ease ;
}
.a3:before{
content:"";
position: absolute;
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width: 0%;
height: 100%;
transition:all 0.6s ease ;
z-index: -1;
border-radius:30px;
}
.a3:after{
content:"";
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
position: absolute;
top:-5px;
right: -5px;
left: -5px;
bottom:-5px;
z-index: -1;
border-radius:40px;
filter: blur(20px);
opacity: 0;
transition:0.5s;
}
.a3:hover{
border:1px solid transparent;
}
.a3:hover:before{
width: 100%;
animation: a 8s linear Infinite;
}
.a3:hover:after{
opacity: 1;
filter: blur(20px);
animation: a 8s linear Infinite;
}
/*the fourth button*/
.a4{
overflow: hidden;
position: relative;
width: 200px;
height: 60px;
line-height:60px;
text-align:center;
box-sizing: border-box;
text-transform: uppercase;
color:#fff;
font-size:20px;
border:1px solid #fff;
border-radius:30px;
transition: all 0.5s ease ;
}
.a4:before{
content:"";
position: absolute;
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
top:50%;
left:50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 100%;
height: 0%;
transition:all 0.6s ease ;
z-index: -1;
border-radius:30px;
}
.a4:after{
content:"";
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
position: absolute;
top:-5px;
right: -5px ;
left: -5px ;
bottom:-5px ;
z-index: -1;
border-radius:40px;
filter: blur(20px);
opacity: 0;
transition:0.5s;
}
.a4:hover{
border:1px solid transparent;
}
.a4:hover:before{
height: 300%;
animation: a 8s linear Infinite;
}
.a4:hover:after{
opacity: 1;
filter: blur(20px);
animation: a 8s linear Infinite;
}
/*the fifth button*/
.a5{
overflow: hidden;
position: relative;
width: 200px;
height: 60px;
line-height:60px;
text-align:center;
box-sizing: border-box;
text-transform: uppercase;
color:#fff;
font-size:20px;
border:1px solid #fff;
border-radius:30px;
transition: all 0.5s ease ;
}
.a5:before{
content:"";
position: absolute;
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
top:50%;
left:50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 100%;
height: 0%;
transition:all 0.6s ease ;
z-index: -1;
border-radius:30px;
}
.a5:after{
content:"";
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
background-size:400%;
position: absolute;
top:-5px;
right: -5px ;
left: -5px ;
bottom:-5px ;
z-index: -1;
border-radius:40px;
filter: blur(20px);
opacity: 0;
transition:0.5s;
}
.a5:hover{
border:1px solid transparent;
}
.a5:hover:before{
height: 300%;
animation: a 8s linear Infinite;
}
.a5:hover:after{
opacity: 1;
filter: blur(20px);
animation: a 8s linear Infinite;
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 29 Мая 2020, 21:51 | Сообщение 3 |
|
| CSS кнопки анимации
HTML
Код <button class="expand">Expand</button>
<button class="shake">Shake</button>
<br>
<button class="shine">Shine</button>
<button class="bounce">Bounce</button>
CSS
Код button {
background-color: #e4e4e4;
color:#000;
padding: 20px 10px; /* within the button */
width:300px;
border: 2px solid rgb(233,171,88);
border-radius:5px;
font-size: 18px;
cursor:pointer;
margin:10px 10px;/* between buttons */
}
.shine {
background: -moz-linear-gradient(-45deg, #e4e4e4 0%, #e4e4e4 40%, #e4e4e4 50%, #e4e4e4 60%, #e4e4e4 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e4e4e4), color-stop(40%,#e4e4e4), color-stop(50%,#fff), color-stop(60%,#e4e4e4), color-stop(100%,#e4e4e4));
background: -webkit-linear-gradient(-45deg, #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
background: -o-linear-gradient(-45deg, #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
background: -ms-linear-gradient(-45deg, #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
background: linear-gradient(135deg, #e4e4e4 0%,#e4e4e4 40%,#fff 50%,#e4e4e4 60%,#e4e4e4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#e4e4e4',GradientType=1 );
background-repeat: no-repeat;
background-position:0px;
background-size:300%;
}
.shine:hover {
animation:shine 1s;
-webkit-animation:shine 1s;
}
/* Shine when hover -*/
@keyframes shine {
0% { background-position:-600px; }
100% { background-position:0px; }
}
@-webkit-keyframes shine {
0% { background-position:-600px; }
100% { background-position:0px; }
}
/* Bounce when hover -*/
.bounce:hover {
animation:bounce 1s;
-webkit-animation:bounce 1s;
background-color:rgb(233,171,88);
}
@keyframes bounce {
0% { border-radius:15px; }
20% { border-radius:30px; }
60% { border-radius:0px;
transform:scale(1.1);
-ms-transform:scale(1.1); /* IE 9 */
-webkit-transform:scale(1.1); /* Safari and Chrome */}
90% { transform:scale(0.98);
-ms-transform:scale(0.98); /* IE 9 */
-webkit-transform:scale(0.98); /* Safari and Chrome */}
100% { border-radius:15px; }
}
@-webkit-keyframes bounce {
0% { border-radius:15px; }
20% { border-radius:30px; }
60% { border-radius:0px;
transform:scale(1.1);
-ms-transform:scale(1.1); /* IE 9 */
-webkit-transform:scale(1.1); /* Safari and Chrome */}
90% { transform:scale(0.98);
-ms-transform:scale(0.98); /* IE 9 */
-webkit-transform:scale(0.98); /* Safari and Chrome */}
100% { border-radius:15px; }
}
/* Expand letter when hover*/
.expand {
white-space:nowrap;
overflow:hidden;
transition: letter-spacing 3s;
-webkit-transition: letter-spacing 3s; /* Safari */
transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.expand:hover {
letter-spacing:15.0px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
background-color:rgb(233,171,88);
}
/* Shake when hover-*/
.shake:hover {
animation-duration: 1s;
animation-name: shake;
background-color:rgb(233,171,88);
}
@keyframes shake {
0% { transform:rotate(0deg); }
29% { transform:rotate(0deg); }
30% { transform:rotate(1deg); }
31% { transform:rotate(2deg); }
33% { transform:rotate(1deg); }
35% { transform:rotate(0deg); }
37% { transform:rotate(-1deg); }
39% { transform:rotate(-2deg); }
41% { transform:rotate(-1deg); }
43% { transform:rotate(0deg); }
45% { transform:rotate(1deg); }
47% { transform:rotate(2deg); }
49% { transform:rotate(1deg); }
51% { transform:rotate(0deg); }
53% { transform:rotate(-1deg); }
55% { transform:rotate(-2deg); }
57% { transform:rotate(-1deg); }
59% { transform:rotate(0deg); }
100%{ transform:rotate(0deg); }
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 29 Мая 2020, 21:53 | Сообщение 4 |
|
| Анимированные кнопки на CSS
HTML
Код <div class="group">
<button class="blam">Blam</button>
<button style="-webkit-animation-delay: .3s;animation-delay: .3s;" class="syke">Syke</button>
<button style="-webkit-animation-delay: .6s;animation-delay: .6s;" class="later">Later</button>
</div>
CSS
Код .group{
text-align: center;
margin: 20px auto;
}
.group button{
margin-top: 10px;
}
button{
/* box-sizing: border-box;*/
background: NONE;
border: none;
outline: none;
border-radius: 3px;
padding: 15px 70px;
color:white;
text-transform: uppercase;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.41);
box-shadow: 0 3px 0 0 #383838;
border:3px solid transparent;
animation: pulse 1s linear infinite alternate;
-webkit-animation: pulse 1s linear infinite alternate;
}
.active,
button:active{
background-image: linear-gradient(rgba(0,0,0,.1) 13%, transparent 13%,transparent);
box-shadow: 0 1px 0 0 #383838;
color: rgba(0, 0, 0,.45);
text-shadow: none;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
button:focus,
button:hover{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.blam:focus,
.blam:hover{
background-color:#0097bd;
}
.blam{
background-color:#00bff0;
border-color: #00bff0;
}
.syke:focus,
.syke:hover{
background-color:#ad4e4e;
}
.syke{
background-color:#e06464;
border-color:#e06464;
}
.later:focus,
.later:hover{
background-color:#7c8b8f;
}
.later{
background-color:#a8bdc2;
border-color:#a8bdc2;
}
@-webkit-keyframes pulse {
100% {
transform: translateY(6.9px);
}
}
@keyframes pulse {
100% {
transform: translateY(6.9px);
}
}
See the Pen
6 Buttons animated by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
