Это реально оригинальный эффект для кнопки, где поставлена картинка, а по вверх ее написано ключевое слово. Но при наведение происходит красивый эффект, где меняется слово. Создание настраиваемых кнопок веб-сайтов с использованием CSS было одним из самых востребованных учебников на протяжении многих лет.
HTML
Код
<button>
<div></div>
</button>
CSS
Код
button {
position: absolute;
top: 50%;
right: 0;
left: 0;
display: block;
width: 240px;
padding: 40px;
margin: 0 auto;
border: 0;
cursor: pointer;
border-radius: 2px;
transform: translateY(-50%);
box-shadow: 0 10px 20px -5px #94a6af;
overflow: hidden;
}
button:before, button:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
button:before {
transform: scale(1);
background-image: url('https://himalayasingh.github.io/button-hover-effect-1/img/bg.jpg');
background-size: cover;
transition: 0.3s ease transform;
z-index: 1;
}
button:after {
background-color: #000;
opacity: 0.16;
z-index: 2;
}
button div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
}
button div:before, button div:after {
position: absolute;
top: 0;
right: 0;
left: 0;
color: #fff;
font-size: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
line-height: 1;
text-align: center;
padding: 25px 0;
transition: 0.3s ease all;
}
button div:before {
content: "ZORNET";
letter-spacing: 0;
opacity: 1;
transform: scale(1);
}
button div:after
{
content: "KOSTEN";
letter-spacing: -10px;
transform: scale(0);
opacity: 0;
}
button:hover:before {
transform: scale(1.1);
}
button:hover div:before
{
letter-spacing: 3px;
opacity: 0;
transform: scale(4);
}
button:hover div:after {
letter-spacing: 0;
opacity: 1;
transform: scale(1);
}
a {
position: absolute;
top: 80%;
right: 0;
left: 0;
display: block;
width: 160px;
color: #ff0000;
text-align: center;
font-size: 16px;
font-family: Helvetica, arial;
font-weight: bold;
text-decoration: none;
line-height: 1;
padding: 16px;
margin: 0 auto;
border: 2px solid #ff0000;
border-radius: 2px;
z-index: 1;
}
Демонстрация