Вашему вниманию один из оригинальных эффектов, который безусловно красочным является и привязан кнопке, что красиво смотрится на темном фоне. Изначально идет название, у которого нет не какого дизайн, оно по умолчанию не слишком яркое.
Но только наводишь на его эффект, как становится ярким и читабельным, но главное на нем отображается мушка прицела. Безусловно этот эффект тематический, но явно удивит как пользователей или гостей сайта.
Так смотрится при заходе на сайт:
Здесь уже выглядит при наведение курсора:
Приступаем к установке:
HTML
Код
<div class="kecnalogun-conuesta">
<span>ZORNET.RU</span>
<span class="top"></span>
<span class="bottom"></span>
<span class="left"></span>
<span class="right"></span>
</div>
CSS
Код
.kecnalogun-conuesta {
width: 9em;
height: 3em;
font-size: 30px;
font-family: sans-serif;
text-align: center;
line-height: 3em;
letter-spacing: 0.2em;
position: relative;
filter: blur(2px);
transition: 0.5s;
}
.kecnalogun-conuesta:hover {
filter: blur(0.2px);
}
.kecnalogun-conuesta::after {
content: '';
position: absolute;
width: 3em;
height: 3em;
border: 1px solid red;
border-radius: 50%;
left: 3em;
filter: opacity(0);
}
.kecnalogun-conuesta span:not(:first-child) {
position: absolute;
background-color: red;
filter: opacity(0);
}
.kecnalogun-conuesta span.top,
.kecnalogun-conuesta span.bottom {
width: 1px;
height: 3em;
left: 50%;
}
.kecnalogun-conuesta span.top {
top: -3em;
}
.kecnalogun-conuesta span.bottom {
bottom: -3em;
}
.kecnalogun-conuesta span.left,
.kecnalogun-conuesta span.right {
width: 3em;
height: 1px;
top: 50%;
}
.kecnalogun-conuesta span.left {
left: 0;
}
.kecnalogun-conuesta span.right {
right: 0;
}
.kecnalogun-conuesta:hover::after,
.kecnalogun-conuesta:hover span:not(:first-child) {
animation: aim 1s linear infinite alternate;
}
@keyframes aim {
from {
filter: opacity(0.2);
}
to {
filter: opacity(0.8);
}
}
Демонстрация
