» »

Кнопка с эффектом всплывающей подсказки 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, что неплохо подходит для браузеров, которые не поддерживают анимацию.

Демонстрация:
2018-01-15 Просмотров: 432 Комментарий: (10)

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

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

Комментарий: 10
Kosten
Kosten 2018-01-15 22:231
0
Кно знает, как можно поставить под весь файла, это нужно делать отдельно окно, для того, чтоб самому написать и вывести через оператор.
waak
waak 2018-01-15 22:582
0
ты пьяный? не понял смысл комментария?
Kosten
Kosten 2018-01-15 23:523
0
waak, я к тебе отношусь с большим уважением, но это тебе не позволяет идти на оскорбление, пьяный, ушатаный, или уштыренный, это что такое. Но если тебе так интересно, я вообще не пью, не пиво не тоники разные, это отрава для меня.

Если по вопросу не правильно написал, но поправь, но грубить не вижу смысла!
waak
waak 2018-01-15 23:594
0
Не думал что мой вопрос будет оскорблением! но если так то прошу прошение за это! так как нечего такого не хотел! просто текст комментария был написан так что, не смысла, не темы не понять! вот и возник вопрос о состояние человека который его задал!
Kosten
Kosten 2018-01-16 00:055
0
Все нормально, просто от кого, кого, но от тебя не ожидал, но проехали.

А по вопросу, просто хотел узнать, как выводят вес, это делается через оператор, или как то по другому?
waak
waak 2018-01-16 03:196
0
вес файла только оператором, можно и скриптом хотя это лишнее
Kosten
Kosten 2018-01-16 03:417
0
Но как понял, это не сложно через оператор сделать. Просто у кого софт, то для них будет не лишним изначально указывать вес файла или архива, что решил скачать.
-SAM-
-SAM- 2018-01-17 00:298
0
В общем, кто не знает как это реализовать, то почитать комментарии здесь можно (там и разбирался вопрос по поводу размера файла на удаленном источнике).
Mix5280
Mix5280 2018-01-26 13:249
0
Цитата Kosten ()
Кно знает, как можно поставить под весь файла, это нужно делать отдельно окно], для того, чтоб самому написать и вывести через оператор.

Удивительно, даже не исправил. Ты читал что ты написал. Описание материала твоё с первых строк строк вгоняет в ступор вот:- Вашему вниманию оригинальная кнопка CSS3с отличное решение для софт портала Ты или алкаш или болен. Если болен, то прости меня за мои резкие слова, мой сарказм.
Kosten
Kosten 2018-01-26 19:2910
0
Принимаю критику здравую, но по описанию на сайте "куплено" и подключено CEO.
avatar