ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопка с эффектом всплывающей подсказки CSS3

Кнопка с эффектом всплывающей подсказки CSS3

Вашему вниманию оригинальная кнопка CSS3 с отличное решение для софт портала. Где при наведение будет эффект и покажет подпись файла. А точнее его вес, что изначально можно видеть, сколько этот архив весит. И здесь мы подключаем нашу кнопку, которая полностью создана на стилях и безусловно можно поставить разный оттенок цвета под свой ресурс. Сама штора, так назовем, то она по умолчанию будет в одной гамме и на ней можно разместить любую надпись, и также сделать ее по формату, это убрать углы или добавить тень.

Но безусловно, больше внимание идет на информацию, что будет она держать внутри. А это может быть разная, но больше всего, просто поставить оператор, что будет выводить вес файла, что был загружен. Мне приходилось встречать такую функциональность, но там все работало на Javascript, в отличие от этого материала, где все выставлено на CSS3, что позволяет заменить функций скрипта и отлично работать. Здесь не чего не стал менять, думаю вы сами можете добавить стилистики, хотя по умолчанию все смотрится отлично, что остается только подключить.

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

По умолчанию:

CSS: Hover - эффекты при наведении

Здесь после hover-эффекта, с показанием информаций, как было сказана, она может быть разной.

CSS3 эффекта при наведении

HTML

Код

<a class="beglanum_skamrus" href="http://zornet.ru/">
<div class="tremikalob">Скачать файл</div>
<div class="gerbarilan">Размер 59mb</div>
</a>

CSS

Код

.beglanum_skamrus {
  display: inline-block;
  height: 47px;
  color: #3c92ec;
  border: 3px solid #225ad2;
  text-decoration: none;
  overflow: hidden;
}

.tremikalob, .gerbarilan {
  padding: 0 95px;
  line-height: 47px;
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.41, 0.94);
  transition: all 0.2s cubic-bezier(0, 0, 0.48, 0.76);
}

.tremikalob {
  background-color: #195398;
  color: #efe4e4;
}
.beglanum_skamrus:hover .tremikalob{
  margin-top: -47px;
}

Создание этого эффекта на удивление легко настраивается, не требует добавления каких-либо дополнительных элементов. Все создается через CSS и HTML, что неплохо подходит для браузеров, которые не поддерживают анимацию.

Демонстрация:

15 Января 2018 Просмотров: 1136 Комментариев: (10)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 10
Порядок вывода комментариев: Kosten 15 Января 2018 22:23¹ 0 Кно знает, как можно поставить под весь файла, это нужно делать отдельно окно, для того, чтоб самому написать и вывести через оператор. waak 15 Января 2018 22:58² 0 ты пьяный? не понял смысл комментария? Kosten 15 Января 2018 23:52³ 0 waak, я к тебе отношусь с большим уважением, но это тебе не позволяет идти на оскорбление, пьяный, ушатаный, или уштыренный, это что такое. Но если тебе так интересно, я вообще не пью, не пиво не тоники разные, это отрава для меня. Если по вопросу не правильно написал, но поправь, но грубить не вижу смысла! waak 15 Января 2018 23:59⁴ 0 Не думал что мой вопрос будет оскорблением! но если так то прошу прошение за это! так как нечего такого не хотел! просто текст комментария был написан так что, не смысла, не темы не понять! вот и возник вопрос о состояние человека который его задал! Kosten 16 Января 2018 00:05⁵ 0 Все нормально, просто от кого, кого, но от тебя не ожидал, но проехали. А по вопросу, просто хотел узнать, как выводят вес, это делается через оператор, или как то по другому? waak 16 Января 2018 03:19⁶ 0 вес файла только оператором, можно и скриптом хотя это лишнее Kosten 16 Января 2018 03:41⁷ 0 Но как понял, это не сложно через оператор сделать. Просто у кого софт, то для них будет не лишним изначально указывать вес файла или архива, что решил скачать. -SAM- 17 Января 2018 00:29⁸ 0 В общем, кто не знает как это реализовать, то почитать комментарии здесь можно (там и разбирался вопрос по поводу размера файла на удаленном источнике). Mix5280 26 Января 2018 13:24⁹ 0 Цитата Kosten () Кно знает, как можно поставить под весь файла, это нужно делать отдельно окно], для того, чтоб самому написать и вывести через оператор. Удивительно, даже не исправил. Ты читал что ты написал. Описание материала твоё с первых строк строк вгоняет в ступор вот:- Вашему вниманию оригинальная кнопка CSS3с отличное решение для софт портала Ты или алкаш или болен. Если болен, то прости меня за мои резкие слова, мой сарказм. Kosten 26 Января 2018 19:29¹⁰ 0 Принимаю критику здравую, но по описанию на сайте "куплено" и подключено CEO.