Эффект при наведении с бликом для кнопки CSS

Эффект при наведении с бликом для кнопки CSS

Эффект при наведении с бликом для кнопки CSS подойдет для кнопок, в виде ссылки, для небольших блоков, для заголовков и других деталей. Кода не много, цвет кнопки можно менять по своему усмотрению.

Пример

HTML


<a href="#" title="" class="shine-button">Lorem Ipsum</a>

CSS


.shine-button {
    text-decoration: none;
    display: inline-block;
    padding: 10px 30px;
    margin: 15px 0;
    position: relative;
    overflow: hidden;
    border: 1px solid #527c82;
    background: #83bec5;
    color: #fff !important;
	font-size: 0.950em;
	text-transform:  uppercase;
    transition: .2s ease-in-out;
}
.shine-button:before {
    content: "";
    background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .5));
    height: 60px;
    width: 50px;
    position: absolute;
    top: 0px;
    left: -80px;
    transform: skewX(-45deg);
}
.shine-button:hover {
    background: #83bec5;
    color: #fff !important;
}
.shine-button:hover:before {
    left: 100%;
    transition: .5s ease-in-out;
}
.shine-button:focus {
    background: #83bec5;
    color: #fff !important;
    outline: none;
}
By julia