Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Одна кнопка - два рисунка

Опубликовано:

Каким образом можно сделать кнопку например к "Общем шаблоне форума"

 

Тоисть : Есть кнопка а когда на неё наводиш мышкой она изменяется на другую.

 

Пример : Кнопка в надпись "открыть", после того как наведёш на неё мышкой она измениться и будет написано там "Нажмите"

 

Пример2 : Кнопка на которой определенный ресунок - и как на неё наводиш мышкой - эта кнопка начинает переливаться или же выделяется.

 

Принцип работы как я понял -- две картинка, одна отвечает за просто кнопку а другой отвечает за то когда наводиш на неё мышкой.

 

 

Был бы благодарен за инструкцию как это создать, желательно пример кнопки подобного типа !

Рекомендованные сообщения

Опубликовано:

Кнопка должна обозначать какое-то действие?

Это существующая кнопка, к которой привязано какое-либо действие?

 

То, что Вы описываете, похоже на то, что в темах у ника?

Просто в некоторых случаях это просто реализовать, а в некоторых не очень.

Но в любом случае кнопка "должна быть ссылкой".

Картинка должна быть в тегах кнопка

Можно задать ее классом css в двух вариантах, в пассивном состоянии и в активном.

Кроме того, иногда используются java скрипты для реализации такого эффекта...

Опубликовано:
  • Автор
Кнопка должна обозначать какое-то действие?

Это существующая кнопка, к которой привязано какое-либо действие?

 

То, что Вы описываете, похоже на то, что в темах у ника?

Просто в некоторых случаях это просто реализовать, а в некоторых не очень.

Но в любом случае кнопка "должна быть ссылкой".

Картинка должна быть в тегах <a href="">кнопка</a>

Можно задать ее классом css в двух вариантах, в пассивном состоянии и в активном.

Кроме того, иногда используются java скрипты для реализации такого эффекта...

да, кнопка должна означать определенное действие(открытие определенной ссылки) кнопки этой нет и действия тоже. То что у темах около ника - на это похоже частично, <a href="">кнопка</a> - таким образом получается просто обычная кнопка, а вот как задать с помощу css - чтобы она менялась при навидении мышкой на нее - это я и незнаю - вот в этом и проблемма.

Изменено пользователем L-e-o-n

Опубликовано:

Вы вначале один класс для кнопки создайте, оформите как нужно, потом напишите его сюда.

И скриншот кнопки + место ее в шаблоне.

Опубликовано:
  • Автор
Вы вначале один класс для кнопки создайте, оформите как нужно, потом напишите его сюда.

И скриншот кнопки + место ее в шаблоне.

<a href="http:///адрес перехода"><img src="адрес иконки" border="0" width="88" height="31" /></a> Вот мне нужно какие либо образом сделать, чтобы был один рисунок когда ненаводиш мышкой на эту кнопку, и чтобы был другой рисунок когда наводиш на эту кнопку. Вы немогли бы написать более подробно как это реализовать?

Опубликовано:

Вариант для "потухания" кнопки в неактивном состоянии. Лишних картинок не надо.

В css допишите:

#button a img {opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);}
#button a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}

 

В html:

<div id="button" align="center">
<a href="http://адрес перехода"><img src="адрес иконки" border="0" width="88" height="31" /></a></div>

Опубликовано:
  • Автор
Вариант для "потухания" кнопки в неактивном состоянии. Лишних картинок не надо.

В css допишите:

#button a img {opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);}
#button a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}

 

В html:

<div id="button" align="center">
<a href="http://адрес перехода"><img src="адрес иконки" border="0" width="88" height="31" /></a></div>

Огромное спасибо, все работает. А вы немогли бы подсказать - как сделать чтобы под этим рисунком(иконкой) была надпись(обозначения) ?

Опубликовано:

Может alt прописать?

Или я что-то не понимаю.. :)

Опубликовано:
  • Автор
Может alt прописать?

Или я что-то не понимаю.. :)

:) нее, не alt ! Вот предположем кнопки, просто рисунок, вот чтобы ПОД этим рисунком была надпись.

 

Но данную проблемму я уже решил, таким образом что надпись я прям на иконке написал, и выглядит довольно нормально с ксс (инструкцией которую вы написали выше) Вообще проблемма решена, ещё раз спасибо большое за помощь !)

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

  • Нет пользователей, просматривающих эту страницу.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.