Кнопки

Различные интересные эффекты, которые можно применить для кнопок.

<p class="light-button green"><i class="fa fa-shopping-cart"></i> Корзина</p>
<p class="light-button orange"><i class="fa fa-exchange"></i> Сравнить</p>
<p class="light-button yellow"><i class="fa fa-envelope"></i> Отправить</p>
<p class="light-button blue"><i class="fa fa-calculator"></i> Расчет стоимости</p>
<p class="light-button violet"><i class="fa fa-search"></i> Поиск</p>
<p class="light-button red"><i class="fa fa-trash"></i> Удалить</p>
<p class="light-button birusa"><i class="fa fa-volume-up"></i> Слушать</p>
<p class="light-button darkgreen"><i class="fa fa-camera"></i> Галерея</p>
<p class="light-button coral"><i class="fa fa-cog"></i> Настройки</p>

CSS

/* Кнопки (разные) */

.line {border: 1px solid #000; border-bottom: 1px solid #222; clear: both;}

.line-wt {border: 1px solid #ddd; border-bottom: 1px solid #fff; clear: both;}

.light-button {
  box-sizing: border-box;
  width: 25%;
  min-width: 200px;
  padding: 8px 4px;
  margin: 5% auto;
  text-align: center !important;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, border 0.3s;
}

.light-button:hover {color: #fff;}
.light-button:active {border: 2px solid rgb(255, 255, 255);}


.orange {border: 2px solid orange; color: orange;}
.orange:hover {background: orange;}

.yellow {border: 2px solid yellow; color: yellow;}
.yellow:hover {background: yellow; color: #111;}

.green {border: 2px solid rgb(122, 201, 0); color: rgb(122, 201, 0);}
.green:hover {background: rgb(122, 201, 0);}
	  
.blue {border: 2px solid rgb(0, 144, 255); color: rgb(0, 144, 255);}
.blue:hover {background: rgb(0, 144, 255);}	  

.red {border: 2px solid rgb(228, 23, 23); color: rgb(228, 23, 23);}
.red:hover {background: rgb(228, 23, 23);}

.violet {border: 2px solid blueviolet; color: blueviolet;}
.violet:hover {background: blueviolet;}
	  
.coral {border: 2px solid coral; color: coral;}
.coral:hover {background: coral;}

.birusa {border: 2px solid rgb(0, 182, 189); color: rgb(0, 182, 189);}
.birusa:hover {background: rgb(0, 182, 189);}

.darkgreen {border: 2px solid rgb(2, 119, 43); color: rgb(2, 119, 43);}
.darkgreen:hover {background: rgb(2, 119, 43);}

Примеры:

Корзина

Сравнить

Отправить

Расчет стоимости

Поиск

Удалить

Слушать

Галерея

Настройки

Градиентные границы

.gradient-border {
  padding: 20px;
  letter-spacing: 0.2em;
  border: 1px solid;
  border-image: linear-gradient(20deg, #f92056 38%, #00deff 65%);
  border-image-slice: 1;
  text-align: center;
}

Кнопка закрытия окна

<div class="closeblock">+</div>

.closeblock {
    cursor: pointer;
    position: fixed;
    line-height: 60px;
    font-size: 82px;
    transform: rotate(45deg);
    text-align: center;
    top: 20px;
    right: 30px;
    color: #ee2828;
}

.closeblock:hover {color: #fff;}

Эффект блеска кнопки

Добавляем класс к нужной кнопке скриптом

$('.button').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></div>');

Стили

.autoflash{
	position: relative;
	overflow: hidden;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.flash{
	content: "";
	background-color: rgba(255, 255, 255, 0.5);
	height: 100%;
	width: 3em;
	display: block;
	position: absolute;
	top: 0;
	left: -4.5em;
	-webkit-transform: skewX(-45deg) translateX(0);
	transform: skewX(-45deg) translateX(0);
	-webkit-transition: none;
	transition: none;
}

.lighting {
	webkit-animation: moving 3s ease-in-out infinite;
	-moz-animation: moving 3s ease-in-out infinite;
	-ms-animation: moving 3s ease-in-out infinite;
	-o-animation: moving 3s ease-in-out infinite;
	animation: moving 3s ease-in-out infinite;

}
    
@keyframes moving {  
	30% {  webkit-transform: skewX(-45deg) translateX(33.5em);
		transform: skewX(-45deg) translateX(33.5em); 
	}

	100% {  webkit-transform: skewX(-45deg) translateX(33.5em);
		transform: skewX(-45deg) translateX(33.5em);
	}
}

[site-socialshare]