CSS кнопка с эффектом заполнения

Здравствуйте, сегодня поговорим о создании круглой кнопки, которая при наведении будет менять свой цвет – тем самым будем создавать эффект нажатия на кнопку.

Скачать исходники для статьи можно ниже

1. Создаем простую ссылку:

<a class="circle" href=/feed>RSS</a>

Для пример, можете разместить вышеуказанный код в виджет “Текст” (панель управления wordpress – в левом меню пункт “Внешний вид” и его подпункт “Виджеты” – выбираем виджет с названием “Текст”, перетаскиваем его в сайдбар и вставляем код).

2. Теперь добавим CSS стили для данной ссылки: придав ей форму круга, цвет и тени, а также эффект заполнения:

.circle {
  display:block;
  text-decoration:none;
  border-radius:100%;
  background:#ec562e;
  width:100px;
  height: 100px;
  color:#fff;
  text-align:center;
  font:bold 16px/100px Arial, sans-serif;
  text-transform:uppercase;
  transition: all 0.4s ease-in-out;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.5), inset 0 0 0 10px rgba(0,0,0,.3);
}
.circle:hover {
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.1);
}

Вышеуказанный код для сайтов на wordpress нужно разместить в файле стилей – style.css (панель управления – пункт “Внешний вид” – подпункт “Редактор” – слева в списке шаблонов ищем файл style.css – открываем его и в самый низ вставляем код).

С помощью вышеуказанного кода мы указали, что:

– ссылка является блоком (display);

– далее мы закруглили углы блока(border-radius 100% );

– после задали фон блока (background);

– задали ширину и высоту блока – чтобы он стал кругом;

– указали шрифт, выравнивание, размер и т.д. для текста;

– затем мы задали параметры эффекта перехода между двумя состояниями элемента (transition);

– и последнее мы задали тени (белую – rgba(255,255,255, ) и черную – rgba(0,0,0, )) с отступами (box-shadow);

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

– далее мы прописываем событие “hover” – то есть, что будет происходить с кнопкой при наведении на нее курсора мышки – а именно задаем сдвиг теней и меняем немного прозрачность.

В итоге у нас должно получиться следующее:

До наведения курсора мышки на кнопку:

После наведения курсора: