Используем эффект 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%; }

Вот и всё!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/KFTDCOvntMw/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Используем эффект Hover для кнопок | | 2013-07-22 21:16:20 | | Статьи Web-мастеру | | Сегодняшний наш урок будет посвящён CSS3, и мы поговорим о том, как можно воспользоваться эффектом hover для того чтобы создать интересные кнопки.Давайте начнём с html. Прошу обратить внимание, что | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: