background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Кнопка с подтекстом на css3

Кнопка с подтекстом на css3
Просмотров: 916  Скачан: 218 раз  Комментариев в теме: 0

Довольно практичная кнопка для сайта, без каких либо нареканий. В кнопке используется тот же принцип действия, что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с поправкой на то, что она раскрывается не вниз как предыдущая, а вправо, за тем уже виден сам подтекст. Данная кнопка была взята как образец и используется на нашем сайте. Кнопка полноценно работает во всех браузерах.

Шаг 1 - создание разметки

 

HTML

<div class="button-wrapper">
    <a href="#" class="a-btn">
        <span class="a-btn-text">Register now</span> 
        <span class="a-btn-slide-text">It's free!</span>
        <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-text">Become a member</span>
        <span class="a-btn-slide-text">Sign up!</span>
        <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-text">Get an account</span>
        <span class="a-btn-slide-text">Free!</span>
        <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-text">Enter</span>
        <span class="a-btn-slide-text">Log in!</span>
        <span class="a-btn-icon-right"><span></span></span>
    </a>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
Материалы по теме:

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на ...

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....
Интересные публикации:

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Valenti v1.1.8Valenti v1.1.8

Многофункциональная журнальная тема с полной адаптивной вёрсткой для WordPress....

LibertyLiberty

Универсальный html шаблон Liberty, созданный с уклоном на интерьер, на главной странице располагается адаптированы слайдер с комментариями к изображен...

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....
  • Текущий 1.57/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.6/5( Голосов 7 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить