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

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


Кнопка

<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;
}

If you found an error, highlight it and press Shift + Enter or click here to inform us.

Author: master

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

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

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

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

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