Эти кнопки по своему дизайну выглядят как стандартные, где при наведение появляется цветовая гамма. Но только не здесь, ведь они растягиваются, где одновременно появляется знаки, что будут перед ключевыми словами.
HTML
Код
<button class="vedmolas-kugsan">BOOK<span> >>></span></button>
<button class="vedmolas-kugsan">MORE INFO<span> >>></span></button>
CSS
Код
button {
font-family: 'Play', sans-serif;
font-size: 16px;
background: transparent;
border: 2px solid #eee;
width: 150px;
height: 50px;
border-radius: 5px;
color: #eee;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
transition: 400ms ease-in-out;
margin: 0 10px 0 10px;
}
.vedmolas-kugsan {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button:hover {
width: 170px;
background: #777;
border: 2px solid #777;
margin: 0;
}
button:focus {
border: none;
}
button span {
color: transparent;
transition: 500ms;
margin-left: -20px;
}
button:hover span{
color: #eee;
margin-left: 0;
}
Демонстрация
