Красивые CSS3 кнопки с анимацией и hover эффектами

Красивые CSS3 кнопки с анимацией и hover эффектами
HTML и CSS 0    48801 +2

Я составил подборку CSS кнопок, которые могут быть использованы в веб-проектах без применения JavaScript ☝

0. Невероятно красивая кнопка с градиентом

Вах Вах

Подключение HTML:


  Вах Вах

Подключение CSS:

.button-container {
position:relative;
left:50%;
margin-top:50px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)
}

.btn-gr {
display:block;
height:50px;
width:186px;
position:relative;
overflow:hidden;
text-decoration:none;
text-transform:uppercase;
letter-spacing:2px;
color:#fff;
font-size:14px;
text-align:center;
color:#fff
}

.btn-gr:after {
position:absolute;
content:'';
display:inline-block;
background:#3bade3;
background:linear-gradient(45deg,#3bade3 0%,#576fe6 25%,#9844b7 51%,#ff357f 100%);
height:50px;
width:372px;
z-index:-1;
-webkit-transform:translateX(-280px);
transform:translateX(-280px);
transition:-webkit-transform 400ms ease-in;
transition:transform 400ms ease-in;
transition:transform 400ms ease-in,-webkit-transform 400ms ease-in
}

.btn-gr:hover:after {
-webkit-transform:translateX(-200px);
transform:translateX(-200px)
}

.btn-gr span {
color:#fff;
position:relative;
top:16px
}

1. Кнопка с градиентом

Кнопка с градиентом

Подключение HTML:

Кнопка с градиентом

Подключение css:

.push_button {
	position: relative;
	width:220px;
	height:40px;
	text-align:center;
	color:#FFF;
	text-decoration:none;
	line-height:43px;
	font-family:'Oswald', Helvetica;
	display: block;
	margin: 30px 0;
}
.push_button:before {
	background:#f0f0f0;
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;	
	-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	-moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
	box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
	position: absolute;
	content: "";
	left: -6px; right: -6px;
	top: -6px; bottom: -10px;
	z-index: -1;
}
.push_button:active {
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
	top:5px;
}
.push_button:active:before{
	top: -11px;
	bottom: -5px;
	content: "";
}
.red_push {
	text-shadow:-1px -1px 0 #A84155;
	background: #D25068;
	text-transform: uppercase;
	border:1px solid #D25068;
	background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
	background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
	background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
	background-image:-o-linear-gradient(top, #F66C7B, #D25068);
	background-image:linear-gradient(to bottom, #F66C7B, #D25068);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;	
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5);
}
.red_push:hover {
	background: #F66C7B;
	color: #fff;
	background-image:-webkit-linear-gradient(top, #D25068, #F66C7B);
	background-image:-moz-linear-gradient(top, #D25068, #F66C7B);
	background-image:-ms-linear-gradient(top, #D25068, #F66C7B);
	background-image:-o-linear-gradient(top, #D25068, #F66C7B);
	background-image:linear-gradient(top, #D25068, #F66C7B);
}

2. Кнопка с бликом

Кнопка с бликом

Подключение HTML:

Кнопка с бликом

Подключение css:

a.boot {
  -webkit-transform: translate3D(0, 0, 0);
  -webkit-backface-visibility: hidden;
  color: #2d2d2d;
  padding: 10px 0px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 20px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  width: 260px;
  margin: 30px 0;
  text-align: center;
}
a.boot:after {
  padding: 0;
  border: 2px solid #000000;
  content: '';
  width: 95%;
  height: 46px;
  display: block;
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
}
a.boot:before {
  -webkit-transition: all 0s ease-in-out;
  -moz-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out;
  content: '';
  width: 100%;
  height: 60px;
  display: block;
  position: absolute;
  z-index: -1;
  border-left: 15px solid white;
  box-shadow: -20px 30px 30px white;
  background: transparent;
  top: 0px;
  left: -15px;
  margin-left: -1px;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
 a.boot:hover:before, a.boot:active:before, a.boot:focus:before {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: translate(115%, 0);
  -moz-transform: translate(115%, 0);
  -ms-transform: translate(115%, 0);
  -o-transform: translate(115%, 0);
  transform: translate(115%, 0);
}

3. Кнопка с красивым эффектом

Красивый эффект

Подключение HTML:

Красивый эффект

Подключение css:

.ccd {
    overflow: hidden;
    margin: 30px 0;
    position: relative;
}

a.ddott {
    display: block;
	text-transform: uppercase;
    line-height: 50px;
    height: 50px;
    width: 35%;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 100px 0 #FFF,1px 76px 10px #000;
    color: #FFF;
    background: #ed1d25;
    border-right: 2px solid #FFF;
    border-left: 2px solid #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}
a.ddott:hover {
    text-shadow: 0 50px 0 #FFF, 1px 51px 20px #FFF;
    margin-top: -50px;
    height: 100px;
    background: #222;
}

4. Кнопка с анимацией загрузки

Кнопка с анимацией загрузки

Подключение HTML:

Кнопка с анимацией загрузки

Подключение css:

a.glo{
 color:#00c6ff;
 padding: 15px 20px;
 text-transform: uppercase;
 width:350px;
 text-decoration:none;
 text-align:center;
 margin:30px 0;
 display: block;
 background-image: linear-gradient(to left,transparent,transparent 50%,#00c6ff 50%,#00c6ff);
 background-position: 100% 0;
 background-size: 200% 100%;
 transition: all .25s ease-in;
 font: 400 18px tahoma;
 border: 1px solid #00C6FF;
}
a.glo:hover {
background-position: 0 0;
color:#fff;
}

5. Кнопка с красивым эффектом и градиентным свечением при наведении

Вжух кнопище

Подключение HTML:


    
Вжух кнопище

Подключение css:

#body_button{
  background: #000;
  height: 300px;
  margin: 0;
  padding: 0;
  color: #ddf;
  background-color: #112;
  text-align: center;
  padding-top: 12vh;
}
.button_hola,
.button_hola::before,
.button_hola::after,
.button_hola span,
.button_hola span::before,
.button_hola span::after
{
  transition: all ease .5s;
}

.button_hola{
  position: relative;
  display: inline-block;
  padding: 0.3em;
  margin: 1em;
  border: solid 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.button_hola:hover
{
  box-shadow: 0 0 5em .5em rgba(50,50,150,0.5);
}

.button_hola span
{
  display: inline-block;
  width: 100%;
  padding: 0.6em 2em;
}

.button_hola:hover span
{
  background-color: #fff;
  color: #112;
}

.button_hola::before,
.button_hola::after,
.button_hola span::before,
.button_hola span::after
{
  content: '';
  position: absolute;
  border: 1px;
}

.button_hola::before,
.button_hola span::before
{
  border-style: solid none;  
}

.button_hola::before,
.button_hola span::after{      
  left: 0;
  top: -0.4em;
  width: 100%; 
  height: calc(100% + 0.8em);
}

.button_hola::after,
.button_hola span::after
{
  border-style: none solid;   
}

.button_hola::after,
.button_hola span::before
{
  top: 0;
  left: -0.4em;
  height: 100%;
  width: calc(100% + 0.8em); 
}

.button_hola:hover::after,
.button_hola:hover span::after
{
  transform: scaleY(0);
}

.button_hola:hover::before,
.button_hola:hover span::before
{
  transform: scaleX(0);
}

.button_hola:hover span::after,
.button_hola:hover span::before
{
  opacity: 0;
}

Поделиться с друзьями

Похожие статьи:

Подборка слайдеров для сайта на чистом CSS
 Кнопка для сайта в стиле минимализм
 Градиент для кнопок на сайте
 3D текст с мультяшным эффектом на CSS
 CSS анимация в стиле рентгена
 Верстка блоков со стрелочками
 Анимированный фон с плавающими облаками
 Красивое оформление 404 страницы
 Вертикальное hover hide меню для сайта на HTML и CSS
 Стилизация Input File

Комментарии ()

  1. Алексей Дубровин 09 сентября 2020, 16:39 # ↓ 0
    Еще есть новая тенденция — Кнопки с Блеском. Привлекают внимание, повышают конверсию. По такой кнопке чаще кликают. Вот здесь есть код и демонстрация для трех разных анимированных кнопок с блеском. Есть эффект с наведением мыши и без наведения, на чистом CSS, без JS profi.spage.me

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte
    Требуется программист