Эффектные кнопки на сайте

Ни один сайт не обходится без кнопок. Главное назначение кнопок – запуск любых активных действий: листание слайдеров, раскрытие всплывающей информации, навигация по страницам и отправка различных форм – регистрация и авторизация, оформление заказов, редактирование информации в личных кабинетах и многое другое.

Важность дизайна кнопок трудно переоценить. Ведь яркая, необычная кнопка позволяет привлечь внимание пользователя и мотивирует его к действиям. Поэтому дизайнеры и разработчики придумывают всё более замысловатые эффекты и анимации. Тем более что с помощью современных средств html/css/js можно реализовать практически любую задумку.

Технически для создания эффектов активно используются псевдоэлементы (:before и :after) и их относительное позиционирование, поскольку они не загружают вёрстку лишними блоками. Для создания несложных эффектов и анимаций достаточно css3. Для сложных анимаций уже применяются средства svg/js.

Предлагаем небольшую подборку анимированных кнопок, которые помогут сделать ваш сайт более живым.

Кнопка Кнопка Кнопка Кнопка

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
a.animated-button:link, a.animated-button:visited {
	position: relative;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	-webkit-transition: all 0.75s ease 0s;
	-moz-transition: all 0.75s ease 0s;
	-o-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
	color: #FFF;
	text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
	height: 450%;
}
a.animated-button:link, a.animated-button:visited {
	position: relative;
	color: #fff;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.animated-button span {
	position:relative;
	z-index:1
}
a.animated-button.victoria {
	border: 2px solid #3ca0ff;
	background:#3ca0ff;
}
a.animated-button.victoria:after {
	background: #77c7ff;
}
a.animated-button.victoria-one:after {
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.victoria-two:after {
	-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.victoria-three:after {
	opacity: .5;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
	height: 140%;
	opacity: 1;
}
a.animated-button.victoria-four:after {
	opacity: .5;
	-moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.victoria-four:hover:after {
	opacity: 1;
	height: 700% !important;
}

Кнопка Кнопка Кнопка Кнопка

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
a.animated-button:link, a.animated-button:visited {
	position: relative;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	-webkit-transition: all 0.75s ease 0s;
	-moz-transition: all 0.75s ease 0s;
	-o-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
	color: #FFF;
	text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
	height: 450%;
}
a.animated-button:link, a.animated-button:visited {
	position: relative;
	color: #fff;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.animated-button span {
	position:relative;
	z-index:1
}
a.animated-button.sandy {
	border: 2px solid #ed5252;
	background:#ed5252;
	color: #fff;
}
a.animated-button.sandy:after {
	border: 3px solid #ffebe9;
	opacity: 0;
	color:#fff;
}
a.animated-button.sandy-one:after {
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
a.animated-button.sandy-one:hover:after {
	height: 120% !important;
	opacity: 1;
}
a.animated-button.sandy-two:after {
	-moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.sandy-two:hover:after {
	height: 700% !important;
	opacity: 1;
}
a.animated-button.sandy-three:after {
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.sandy-three:hover:after {
	height: 400% !important;
	opacity: 1;
}
a.animated-button.sandy-four:after {
	-moz-transform: translateY(-50%) translateX(-50%) rotate(25deg);
	-ms-transform: translateY(-50%) translateX(-50%) rotate(25deg);
	-webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg);
	transform: translateY(-50%) translateX(-50%) rotate(25deg);
}
a.animated-button.sandy-four:hover:after {
	height: 400% !important;
	opacity: 1;
}

Кнопка Кнопка Кнопка Кнопка

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
a.animated-button:link, a.animated-button:visited {
	position: relative;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	-webkit-transition: all 0.75s ease 0s;
	-moz-transition: all 0.75s ease 0s;
	-o-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
	color: #FFF;
	text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
	height: 450%;
}
a.animated-button:link, a.animated-button:visited {
	position: relative;
	color: #fff;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.animated-button span {
	position:relative;
	z-index:1
}
a.animated-button.gibson {
	border: 2px solid #0cb190;
	background:#0cb190;
	color: #fff;
}
a.animated-button.gibson:after {
	opacity: 0;
	color:#fff
}
a.animated-button.gibson-one:after {
	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,134,122,0.4) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(101,134,122,0.4) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.gibson-one:hover:after {
	height: 600% !important;
	opacity: 1;
}

a.animated-button.gibson-two:after {
	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,134,122,0.4) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(101,134,122,0.4) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.gibson-two:hover:after {
	height: 600% !important;
	opacity: 1;
}

a.animated-button.gibson-three:after {
	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,134,122,0.4) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(101,134,122,0.4) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
	transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
a.animated-button.gibson-three:hover:after {
	height: 700% !important;
	opacity: 1;
}

a.animated-button.gibson-four:after {
	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,134,122,0.4) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(101,134,122,0.4) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%));
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
a.animated-button.gibson-four:hover:after {
	height: 600% !important;
	opacity: 1;
}

Кнопка

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
.demo-btn-gradient {
   background-size: 200% auto;
   background-image: linear-gradient(to right, #01abbf 0%, #12c9de 51%, #01abbf 100%);
   transition: all 300ms linear 0ms;
}
.demo-btn-gradient:hover {
   background-position: right center;
   transition: background-position 300ms linear 0ms;
}

Кнопка

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
.demo-btn-shadow {
	background: #ed5252;
	transition: all 500ms linear 0ms;
}
.demo-btn-shadow:hover {
	box-shadow: 0 0 40px 40px #ffadad inset;
	transition: box-shadow 500ms linear 0ms;
	color:#ed5252;
}

Слой 1 Слой 2

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
.demo-btn-slide {
	position:relative;
	text-align: center;
    overflow: hidden;
	padding:0;
}
.demo-btn-slide .layer1 {
   text-align: center;
   background:#3ca0ff;
   display:block;
   position: absolute;
   left: 0px;
   width: 250px;
   height: 40px;
   transition: all 500ms linear 0ms;
   padding:10px 15px;
}
.demo-btn-slide .layer2 {
	text-align: center;
	background:#ed5252;
	display:block;
    position: absolute;
	left:250px;
	width:250px;
	height:40px;
	top:0;
	padding:10px 15px;
}
.demo-btn-slide .layer1:hover {
   left: -100%;
   transition: left 500ms linear 0ms;
}

Раздел10 товаров

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
.demo-sleeve {
	position: relative;
	display:block;
	background: transparent;
	border: 0;
	padding: 11px 15px;
	border: 1px solid #999;
	border-radius: 4px 45px 4px 4px;
	background:#fff;
	text-align:center;
	color: #666666;
	margin-right: 120px;
	width:241px;
	height:42px;
	outline:0 !important;
	text-decoration:none;
}
.demo-sleeve .insert {
	position: absolute;
	left: 10px;
	top:0;
	display: block;
	z-index: -100;
	width: 100%;
	height:40px;
	box-sizing: border-box;
	background:#3ca0ff;
	color: #fff;
	border-radius: 3px;
	text-align: right;
	text-transform:none;
	padding:10px 17px;
	transition: all 0.5s ease-in-out;
}
.demo-sleeve:hover {
	border-color:#3ca0ff;
}
.demo-sleeve:hover .insert {
	text-align: right;
	width: 150%;
	transition: all 0.5s ease-in-out;
}

Наведи

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
.demo-border {
    text-align:center;
	color:#007636;
	position:relative;
	font-weight:bold;
	text-transform:uppercase;
	font-size:14px;
	padding:11px 15px;
    text-decoration: none;
	transition-property: all;
	transition-duration: .6s;
	transition-timing-function: ease;
}
.demo-border:hover,
.demo-border:active {
	letter-spacing: 5px;
	color:#007636;
}
.demo-border:after,
.demo-border:before {
	backface-visibility: hidden;
	border: 1px solid rgba(0,118,54, 0);
	bottom: 0px;
	content: "";
	display: block;
	height:0;
	margin: 0 auto;
	transition: all 280ms ease-in-out;
	width: 0;
	position:absolute;
	left:50%;
	top:0;
}
.demo-border:before {
	bottom:0;
	top:auto;
}
.demo-border:hover:after,
.demo-border:hover:before {
	backface-visibility: hidden;
	border-color: #007636;
	transition:all 350ms ease-in-out;
	width: 100%;
	left:0;
}

Наведи

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
.demo-border1 {
	border:2px solid #007636 !important;
	position:relative;
	color:#007636 !important
}
.demo-border1:before {
	content:'';
	display:block;
	position:absolute;
	left:-2px; top:-2px;
	width:100%;
	height:100%;
	border:2px solid #007636;
	transition:all 0.5s ease;
	opacity:0;
}
@-moz-keyframes border-scale {
	0% {opacity:1;}
	100% {transform: scale(1.1, 1.5);opacity:0}
}
@-webkit-keyframes border-scale {
	0% {opacity:1;}
	100% {transform: scale(1.1, 1.5);opacity:0}
}
@-o-keyframes border-scale {
	0% {opacity:1;}
	100% {transform: scale(1.1, 1.5);opacity:0}
}
@keyframes border-scale {
	0% {opacity:1;}
	100% {transform: scale(1.1, 1.5);opacity:0}
}
.demo-border1:hover:before {
	-webkit-animation: border-scale 0.5s ease;
	animation: border-scale 0.5s ease;
}

CSS

.demo-round {
	margin: 30px 0;
	padding:0;
}
.demo-round li {
	list-style: none;
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;
	text-align: center;
}
@-moz-keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}
@-webkit-keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}
@-o-keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}
@keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}
.demo-round .round {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding-top: 20px;		
	text-decoration: none;		
	text-align: center;
	font-size: 25px;		
	text-shadow: 0 1px 0 rgba(255,255,255,.7);
	letter-spacing: -.065em;
	font-family: "Hammersmith One", sans-serif;		
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	box-shadow: 2px 2px 7px rgba(0,0,0,.2);
	border-radius: 300px;
	z-index: 1;
	border-width: 4px;
	border-style: solid;
	box-sizing:border-box;
}
.demo-round .round:hover {
	width: 130%;
	height: 130%;
	left: -15%;
	top: -15%;
	font-size: 33px;
	padding-top: 30px;
	-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
	-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
	-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
	box-shadow: 5px 5px 10px rgba(0,0,0,.3);
	z-index: 2;
	border-size: 10px;
	-webkit-transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	transform: rotate(-360deg);
}
.demo-round a.red {
	background-color: rgba(239,57,50,1);
	color: rgba(133,32,28,1);
	border-color: rgba(133,32,28,.2);
}
.demo-round a.red:hover {
	color: rgba(239,57,50,1);
}
.demo-round a.green {
	background-color: rgba(39,147,70,1);
	color: rgba(0,63,71,1);
	border-color: rgba(0,118,54,.6);
}
.demo-round a.green:hover {
	color: rgba(1,151,171,1);
}
.demo-round a.yellow {
	background-color: rgba(252,227,1,1);
	color: rgba(153,38,0,1);
	border-color: rgba(153,38,0,.2);
}
.demo-round a.yellow:hover {
	color: rgba(252,227,1,1);
}
.demo-round .round span.round {
	display: block;
	opacity: 0;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	font-size: 1px;
	border: none;
	padding: 55% 20% 0 20%;
	color: #fff;
}
.demo-round .round span:hover {
	opacity: .85;
	font-size: 16px;
	-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
	-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
	-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
	text-shadow: 0 1px 1px rgba(0,0,0,.5);	
}
.demo-round .green span {
	background: rgba(24,104,47,.7);		
}
.demo-round .red span {
	background: rgba(133,32,28,.7);		
}
.demo-round .yellow span {
	background: rgba(161,145,0,.7);	
}

4 5

CSS

.expl-btn {
	display:inline-block;
	width:250px;
	margin:0 20px 20px 0;
	height:40px;
	padding: 10px 15px;
	color: #fff;
	font-size:15px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: top;
	border-radius:3px;
	line-height:1.2
}
.round-rotate1 {
	background-color: #65b37a;
	border: 4px solid #007636;
	transition: all 1500ms ease 0ms;
	width:80px;
	height:80px;
	padding:0;
	line-height:72px;
}
.round-rotate1:hover {
	border-radius:50%;
	transform: rotate(720deg) ;
	transition: border-radius 1500ms ease 0ms, transform 1500ms ease 0ms;
}
 
.round-rotate2 {
	background-color: #65b37a;
	border: 4px solid #007636;
	width:80px;
	height:80px;
	padding:0;
	line-height:72px;
	border-radius:50%;
	transition: all 500ms ease 0ms;
}
.round-rotate2:hover {
	transform: rotateX(0deg) rotateY(360deg) ;
	transition: transform 500ms ease 0ms;
}

Нажми

CSS

.button-press {
    position:relative;
    display: inline-block; 
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
	margin-bottom:30px
} 
.button-press span {
    background-color: #E8E8E8;
    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        
        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
        
        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),        
        
        /* diagonal line pattern */
        -webkit-gradient(
            linear, 
            0% 100%, 
            100% 0%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#D2D2D1), 
            color-stop(60%,#D2D2D1), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
    
        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */
    
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;
    display: inline-block;
    padding: 10px 40px 10px 40px;
    color: #3A474D;
    text-transform: uppercase;
    font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
    font-weight: 700;
    font-size: 32px;
    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
        .button-press span:hover {
            color: #AEBF3B;
            text-shadow: 0px -1px #97A63A;
            cursor: pointer;
        }
        .button-press:active {
            -webkit-box-shadow: 
                0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }
        .button-press:active span{
            -webkit-transform: translate(0, 5px); /* depth of button press */
        }

CSS

.demo-draw-btn button {
	background: none;
	border: 0;
	box-sizing: border-box;
	margin:0 20px 20px 0;
	padding: 1em 2em;
	box-shadow: inset 0 0 0 2px #f45e61;
	color: #f45e61;
	position: relative;
	vertical-align: middle;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.demo-draw-btn button::before, .demo-draw-btn button::after {
	box-sizing: inherit;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
}
.demo-draw-btn .draw {
	transition: color 0.25s;
}
.demo-draw-btn .draw::before, .demo-draw-btn .draw::after {
	border: 2px solid transparent;
	width: 0;
	height: 0;
}
.demo-draw-btn .draw::before {
	top: 0;
	left: 0;
}
.demo-draw-btn .draw::after {
	bottom: 0;
	right: 0;
}
.demo-draw-btn .draw:hover {
	color: #60daaa;
}
.demo-draw-btn .draw:hover::before, .demo-draw-btn .draw:hover::after {
	width: 100%;
	height: 100%;
}
.demo-draw-btn .draw:hover::before {
	border-top-color: #60daaa;
	border-right-color: #60daaa;
	transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.demo-draw-btn .draw:hover::after {
	border-bottom-color: #60daaa;
	border-left-color: #60daaa;
	transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.demo-draw-btn .meet:hover {
	color: #fbca67;
}
.demo-draw-btn .meet::after {
	top: 0;
	left: 0;
}
.demo-draw-btn .meet:hover::before {
	border-top-color: #fbca67;
	border-right-color: #fbca67;
}
.demo-draw-btn .meet:hover::after {
	border-bottom-color: #fbca67;
	border-left-color: #fbca67;
	transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}
.demo-draw-btn .spin {
	width: 5em;
	height: 5em;
	padding: 0;
}
.demo-draw-btn .spin:hover {
	color: #0eb7da;
}
.demo-draw-btn .spin::before, .demo-draw-btn .spin::after {
	top: 0;
	left: 0;
}
.demo-draw-btn .spin::before {
	border: 2px solid transparent;
}
.demo-draw-btn .spin:hover::before {
	border-top-color: #0eb7da;
	border-right-color: #0eb7da;
	border-bottom-color: #0eb7da;
	transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.demo-draw-btn .spin::after {
	border: 0 solid transparent;
}
.demo-draw-btn .spin:hover::after {
	border-top: 2px solid #0eb7da;
	border-left-width: 2px;
	border-right-width: 2px;
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
	transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
	transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
	transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.demo-draw-btn .circle {
	border-radius: 100%;
	box-shadow: none;
}
.demo-draw-btn .circle::before, .demo-draw-btn .circle::after {
	border-radius: 100%;
}

Наведи

CSS

.bsbox .basicBox,
.bsbox .swiggleBox {
	width: 130px;
	height: 65px;
	margin:0 20px 20px 0;
	color: #4274d3;
	font-size:14px;
	line-height: 65px;
	text-transform: uppercase;
	font-weight:bold;
	text-align: center;
	position: relative;
	cursor: pointer;
	display:inline-block;
}
.bsbox svg {
	position: absolute;
	top: 0;
	left: 0;
}
.bsbox svg rect,
.bsbox svg path,
.bsbox svg polyline {
	fill: none;
	stroke: #4274d3;
	stroke-width: 1;
}
.bsbox .basicBox:hover svg rect,
.bsbox .swiggleBox:hover svg path,
.bsbox .checkBox:hover svg polyline {
	stroke: #4274d3;
}
/* Basic Box */
.bsbox svg rect {
	stroke-dasharray: 400, 0;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
}
.bsbox .basicBox:hover svg rect {
	stroke-width: 3;
	stroke-dasharray: 35, 245;
	stroke-dashoffset: 38;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
}
/* Swiggle Box */
.bsbox svg path {
	stroke-dasharray: 265, 0;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}
.bsbox .swiggleBox:hover svg path {
	stroke-width: 3;
	stroke-dasharray: 0, 350;
	stroke-dashoffset: 20;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}

Atom

CSS

:root {
	--bg: #007636;
	--primary: #007636;
	--solid: #fff;
	--btn-w: 10em;
	--dot-w: calc(var(--btn-w)*.2);
	--tr-X: calc(var(--btn-w) - var(--dot-w));
}
.demo-atom-btn {
	position: relative;
	width: var(--btn-w);
	color: var(--primary);
	border: .15em solid var(--primary);
	border-radius: 5em;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.3em;
	line-height: 2em;
	cursor: pointer;
	margin-bottom:30px;
}
.demo-atom-dot {
	content: '';
	position: absolute;
	top: 0;
	width: var(--dot-w);
	height: 100%;
	border-radius: 100%;
	transition: all 300ms ease;
	display: none;
}
.demo-atom-dot:after {
	content: '';
	position: absolute;
	left: calc(50% - .4em);
	top: -.4em;
	height: .8em;
	width: .8em;
	background: var(--primary);
	border-radius: 1em;
	border: .25em solid var(--solid);
	box-shadow: 0 0 .7em var(--solid),
				0 0 2em var(--primary);
}
.demo-atom-btn:hover .demo-atom-dot,
.demo-atom-btn:focus .demo-atom-dot {
	animation: atom 2s infinite linear;
	display: block;
}
@keyframes atom {
	0% {transform: translateX(0) rotate(0);}
	30%{transform: translateX(var(--tr-X)) rotate(0);}
	50% {transform: translateX(var(--tr-X)) rotate(180deg);}
	80% {transform: translateX(0) rotate(180deg);}
	100% {transform: translateX(0) rotate(360deg);}
}

Puzzle

Blinds

Zig-zag

CSS

.demo-p-button {
	height: 60px;
	margin: 30px 0;
	position: relative;
	width: 200px;
}
.demo-p-submit {
	align-items: center;
	background:#007636;
	border: 0;
	border-radius: 15px;
	cursor: pointer;
	color: #fff;
	display: flex;
	font-size:14px;
	font-weight:600;
	height: 60px;
	justify-content: center;
	position: absolute;
	transition: background 300ms, opacity 500ms 800ms;
	user-select: none;
	width: 200px;
}
.demo-p-submit:hover {
	background: #65b37a;
}
.demo-p-button svg {
	left: -200px;
	position: absolute;
	top: -60px;
	transform: scale(1);
}
.demo-p-button path {
	fill:#65b37a;
	stroke:#65b37a;
	transform-origin: 50%;
	transition: transform 1200ms cubic-bezier(0.6, -0.48, 0.735, 0.045), fill 1200ms, stroke 1200ms;
}
.demo-p-refresh {
	cursor: pointer;
	font-weight: 600;
	width: 50px;
}

function anim1(path) {
  path.style.transitionDelay = `${Math.random() * 200}ms`;
  path.style.transformOrigin = `${Math.random() * 50 + 25}% 0%`;
  path.style.transform = `scale(0) rotate(${Math.random() * 100 - 50}deg)`;
  path.style.fill = '#777';
  path.style.stroke = '#555';
};

function reset1(path) {
  path.style.transitionDelay = 0;
  path.style.transformOrigin = `50%`;
  path.style.transform = `scale(1) rotate(0)`;
  path.style.fill = '#273439';
  path.style.stroke = '#273439';
};

function anim2(path, i) {
  path.style.transitionDuration = '1000ms';
  path.style.transitionDelay = `${i * 50}ms`;
  path.style.transformOrigin = `50%`;
  path.style.transform = `scale(0) translateX(${100 + i * 20}px)`;
  path.style.fill = '#777';
  path.style.stroke = '#555';
};


function reset2(path) {
  path.style.transitionDuration = 0;
  path.style.transitionDelay = 0;
  path.style.transformOrigin = `50%`;
  path.style.transform = `scale(1) translateX(0)`;
  path.style.fill = '#273439';
  path.style.stroke = '#273439';
};

const anims = [anim1, anim2, anim1],
	  resets = [reset1, reset2, reset1],
	  buttons = Array.from(document.querySelectorAll('.demo-p-button')),
	  refresh = document.querySelector('.demo-p-refresh')
buttons.forEach((button, i) => {
  const submit = button.querySelector('.demo-p-submit');
  let paths = button.querySelectorAll('path')
  submit.addEventListener('click', () => {
	paths.forEach((path, j) => {
	  anims[i](path, j);
	});
	submit.style.backgroundColor = 'transparent';
	submit.style.opacity = '0';
  })
});

refresh.addEventListener('click', (e) => {
  buttons.forEach((button, i) => {
	const submit = button.querySelector('.demo-p-submit');
	let paths = button.querySelectorAll('path')
	paths.forEach((path, j) => {
	  resets[i](path, j);
	});
	setTimeout(() => {
	  submit.style.backgroundColor = '#273439';
	  submit.style.opacity = '1';
	}, 500)
  })
});

Click Here

CSS

.btnflip {
	position:relative;
	display:block;
	width: 200px;
	height: 60px;
	text-align: center;
	transform-style: preserve-3d;
	perspective: 1000px;
	transform-origin: center center;
}
.btnflip-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 60px;
	font-size: 24px;
	background-color: rgba(255,255,255, .05);
	transform-style: preserve-3d;
	backface-visibility: hidden;
	border-radius: 30px;
	text-transform: uppercase;
	color: #fff;
	transition: 1s;
}
.btnflip-item.btnflip__front {
	transform: rotateX(0deg) translateZ(20px);
}
.btnflip:hover .btnflip-item.btnflip__front {
	transform: rotateX(-180deg) translateZ(20px);
}
.btnflip-item.btnflip__back {
	transform: rotateX(180deg) translateZ(20px);
}
.btnflip:hover .btnflip-item.btnflip__back {
	transform: rotateX(0deg) translateZ(20px);
}
.btnflip-item.btnflip__center {
	background: linear-gradient(to left, #c31a5b, #7129bd);
}
.btnflip-item.btnflip__center::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to left, #ffdd1f, #c31a5b);
	border-radius: 30px;
	transform: translateZ(-1px);
}
.btnflip:hover .btnflip-item.btnflip__center {
	transform: rotateX(-180deg);
}

CSS

.bubbly-button {
	display: inline-block;
	font-size:14px;
	padding: 1em 2em;
	margin-bottom:60px;
	-webkit-appearance: none;
	appearance: none;
	background-color: #ff0081;
	color: #fff;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	position: relative;
	transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
	box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.bubbly-button:focus {
	outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
	position: absolute;
	content: '';
	display: block;
	width: 140%;
	height: 100%;
	left: -20%;
	z-index: -1000;
	transition: all ease-in-out 0.5s;
	background-repeat: no-repeat;
}
.bubbly-button:before {
	display: none;
	top: -75%;
	background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
	background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubbly-button:after {
	display: none;
	bottom: -75%;
	background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
	background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubbly-button:active {
	transform: scale(0.9);
	background-color: #e60074;
	box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.bubbly-button.animate:before {
	display: block;
	animation: topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
	display: block;
	animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes topBubbles {
	0% {
		background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
	}
}
@keyframes bottomBubbles {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
	}
}

var animateButton = function(e) {
  e.preventDefault;
  //reset animation
  e.target.classList.remove('animate');
  
  e.target.classList.add('animate');
  setTimeout(function(){
	e.target.classList.remove('animate');
  },700);
};

var bubblyButtons = document.getElementsByClassName("bubbly-button");

for (var i = 0; i < bubblyButtons.length; i++) {
  bubblyButtons[i].addEventListener('click', animateButton, false);
}