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

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


Кнопка

<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. Мы увидели бездна размещённых статей по текущей теме, только это конечно лучшая

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

Ваш адрес email не будет опубликован.