Кожаная кнопка на CSS3

Пример кнопки с фоном CSS3 под перфорированную кожу. Можно задать для пунктов меню и т.п.

button {
  color: white;
  border: 1px solid black;
  padding: 10px 20px;
  font-size: 24px;
  margin: 10% 40%;
  cursor: pointer;
  background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}
button:hover {
  color: black;
  border: 1px solid #D8BE84;
  background:
radial-gradient(black 12%, transparent 16%) 0 0,
radial-gradient(black 12%, transparent 16%) 8px 8px,
radial-gradient(rgba(60, 53, 39, .1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(60, 53, 39, .1) 15%, transparent 20%) 8px 9px;
background-color:#D8BE84;
background-size:16px 16px;
}

Посмотреть демо можно здесь https://jsfiddle.net/Haikson/pgov37Lr/

Kamo Petrosyan Автор

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

Ваш e-mail не будет опубликован.