кнопка RSS

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

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

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

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

<a class="circle" href=http://mnogoblog.ru/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» — то есть, что будет происходить с кнопкой при наведении на нее курсора мышки — а именно задаем сдвиг теней и меняем немного прозрачность.

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

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

кнопка RSS

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

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

 

3. Посмотреть «Демо-пример»! 

 

 

 

 

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *