Используем эффект Hover для кнопок

10.08.2013

Используем эффект Hover для кнопок

Сегодняшний наш урок будет посвящён CSS3, и мы поговорим о том, как можно воспользоваться эффектом hover для того чтобы создать интересные кнопки.

Давайте начнём с html. Прошу обратить внимание, что мы используем атрибут data-title — данное значение будет отображаться на самой кнопке.

<a class="ph-button" href="#" data-title="Free download">
  <span>
    <span>Free download</span>
  </span>
</a>

Идея в том, что после наведения мыши, фон кнопки должен измениться, причём для этого должна использоваться приятная анимация. Мы воспользуемся псевдо классом :after, а контент будем брать из соответствующих аттрибутов data-…

Код с браузерными префиксами, вы можете найти в исходниках.

.button {
  display: block;
  position: relative;
  height: 3.4em;
  width: 10em;
  margin: .7em auto;
  overflow: hidden; }

  .button > span {
    display: block;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    transition: 1s ease-in-out; }

  .button:after, .button > span > span {
    display: block;
    text-align: center;
    border-radius: 0.625em;
    padding: 1em 0; }
  .button:after {
    content: attr(data-title);
    width: 100%;
    background: #4186b2;
    color: #67d6c1; }
  .button > span > span {
    width: 10em;
    background: #67d6c1;
    color: #4186b2; }

 .button:hover > span {
    width: 100%; }

Для вертикальной смены фона кнопку, воспользуйтесь следующим кодом:

.button > span {
    ..
    width: 100%;
    height: 0%;
    .. }
 .button:hover > span {
    height: 100%; }

Вот и всё!


Скачать:   Демо:   Источник:

Другие темы:

Javascript + jQuery для начинающих в видеоформате
Joomla - профессиональный сайт за один день
Курс "JavaScript&jQuery с нуля до профи
Золотой актив 5.0 Азамат Ушанов