Кнопка меняет цвет

Кнопка меняет цвет текста и фона при наведении мышки


Кнопка

<a href=»https://fms-kursk.ru» class=»c-btn btn-skew» >Кнопка</a>

CSS:

.c-btn {
display: inline-block;
position: relative;
padding: 13px 20px;
/* если нужен прозрачный фон у кнопки

background: transparent;*/
background: #0b82f721;
margin: 0;
/* если нужна рамка вокруг кнопки

border: 3px solid #0070c0;
color: #0070c0;*/
text-align: center;
overflow: hidden;
transition: color 0.3s, border 0.3s;
z-index: 1;
font-size: 1em;
}
@media screen and (max-width: 400px) {
.c-btn {
width: 100%;
margin: 0 0 10px 0 !important;
}
.c-btn:last-child {
margin-bottom: 0 !important;
}
}
.c-btn + .c-btn {
margin-left: 10px;
}
a.c-btn {
text-decoration: none;
}
.c-btn.btn-skew:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
transition: color 0.3s, border 0.5s, background 0.5s;
}
.c-btn.btn-skew:after {
content: »;
display: block;
position: absolute;
width: 0;
height: 120%;
bottom: 0;
left: -10%;
background: #007d8c;
background: rgba(0, 134, 210, 0.9) linear-gradient(rgba(255, 255, 255, 0.2), transparent);
-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg);
z-index: -1;
transition: width 0.2s;
}
.c-btn:hover.btn-skew:after {
width: 120%;
transition: width 0.3s;
}

Author: master

2 комментария к “Кнопка меняет цвет

  1. Наконец мы разыскали то, что отыскивали. Писатель молодчинище. Всех благ

  2. Мы увидели бездна размещённых статей по текущей теме, только это конечно лучшая

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *