Jump to content

Кнопка с ссылкой

Featured Replies

index.php?app=downloads&module=display&s

Название: Кнопка с ссылкой

Добавил: Pashok(one)

Добавлен: 18 Окт 2012

Категория: ББКоды IP.Board

bb код "кнопка", очень удобный, кнопка более заметна чем обычная ссылка.

Для работоспособности кода :

Добавляем данную строку в ipbstyles.css (в самый низ)


.button {

margin: 10px;

text-decoration: none;

font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */

display: inline-block;

text-align: center;

color: #fff;


border: 1px solid #9c9c9c; /* Запасной стиль */

border: 1px solid rgba(0, 0, 0, 0.3);		


text-shadow: 0 1px 0 rgba(0,0,0,0.4);


box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span {

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span {

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;


/* Фоновый паттерн */


background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

					 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */


-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;		

}

.button:hover {

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active {

/* Опускаем на 1px при нажатии */

position: relative;

top: 1px;

}

.button-blue {

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

}

.button-blue:hover {

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');		

}

.button-blue:active {

background: #4477a1;

}

По всем проблемам с бб кодом обращаться ко мне.

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/
Share on other sites

Обновленно

Дополнительный скриншот

f9ffc566.jpg

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12391
Share on other sites

Пробоваю.

Ни хочет... Как пользоваться? Просто кидаешь и она сама в кнопку? Я правильно понимаю?

При установке хука:

Так и должно быть?

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12392
Share on other sites

Пробоваю.

Ни хочет... Как пользоваться? Просто кидаешь и она сама в кнопку? Я правильно понимаю?

При установке хука:

Так и должно быть?

Это bb код выбирай в соответственном меню+залей код css себе в самый низ

+

5131d8d1.png

Внешний вид>bb-коды>в самом низу (скачай последню версию кнопок. я её уже залил

00d2482a.png

Вот тут вот устанавливать.

А далее вот тут выбираешь делаешь всё по инструкции, и воаля кнопка готова!

b363e2f2.jpg

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12393
Share on other sites

А я как хук устанавливал :dance:

Чайник чоуш... :sorry:

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12394
Share on other sites

А я как хук устанавливал :dance:

Чайник чоуш... :sorry:

Как установишь отпишись, мне будет приятно :)

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12395
Share on other sites


.button {

margin: 10px;

text-decoration: none;

font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */

display: inline-block;

text-align: center;

color: #fff;


border: 1px solid #9c9c9c; /* Запасной стиль */

border: 1px solid rgba(0, 0, 0, 0.3);		


text-shadow: 0 1px 0 rgba(0,0,0,0.4);


box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span {

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span {

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;


/* Фоновый паттерн */


background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

					 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */


-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;		

}

.button:hover {

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active {

/* Опускаем на 1px при нажатии */

position: relative;

top: 1px;

}

.button-blue {

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

}

.button-blue:hover {

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');		

}

.button-blue:active {

background: #4477a1;

}

Открой Файл ipbstyles.css
  • Внешний вид >
  • Управление стилями и шаблонами >
  • Управление шаблонами ваш стиль
  • В этом файле : 9bec5670.png
и добавь в самый низ это :

.button {

margin: 10px;

text-decoration: none;

font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /* Изменяйте em для масштабирования кнопки */

display: inline-block;

text-align: center;

color: #fff;


border: 1px solid #9c9c9c; /* Запасной стиль */

border: 1px solid rgba(0, 0, 0, 0.3);		


text-shadow: 0 1px 0 rgba(0,0,0,0.4);


box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);

}

.button, .button span {

-moz-border-radius: .3em;

border-radius: .3em;

}

.button span {

border-top: 1px solid #fff; /* Fallback style */

border-top: 1px solid rgba(255, 255, 255, 0.5);

display: block;

padding: 0.5em 2.5em;


/* Фоновый паттерн */


background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),

					 -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),

					 -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));

background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),

					 -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),

					 -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

/* Настройки паттерна */


-moz-background-size: 3px 3px;

-webkit-background-size: 3px 3px;		

}

.button:hover {

box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

-webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);

}

.button:active {

/* Опускаем на 1px при нажатии */

position: relative;

top: 1px;

}

.button-blue {

background: #4477a1;

background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );

background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

}

.button-blue:hover {

background: #81a8cb;

background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );

background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');		

}

.button-blue:active {

background: #4477a1;

}

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12398
Share on other sites

Ну ни дурак же я, добавил конечно. Только ты пишешь ipbstyle а у меня он ipb_style есть разница? Не думаю.

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12401
Share on other sites

Ну ни дурак же я, добавил конечно. Только ты пишешь ipbstyle а у меня он ipb_style есть разница? Не думаю.

кинь ссылку на свой сайт

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12402
Share on other sites

После обновления кеша сама кнопка появилась таки но:

core.php

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12403
Share on other sites

После обновления кеша сама кнопка появилась таки но:

post-6-0-17607000-1365612433.png

Измени тему и заного правильно напиши и ссылку на сайт кинь

Измени тему и заного правильно напиши и ссылку на сайт кинь

Скачай заного бб_код и поставь по верх того всё должно будет работать

271f918d.jpg

Всё работает, переустанови и смотри куда и что прописываешь, пример кода :


[download='__ipbmafia.ru']Тест кнопки (NEW)[/download]

Edited by Pashok(one)

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12404
Share on other sites

:yahoo: :yahoo: :yahoo:

post-8093-0-71649900-1365664392_thumb.jp

Наконецто :))))

Админы, del все посты кроме

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12406
Share on other sites

Админы, del все посты кроме #13

Нет.

А вообще BB-код бесполезный, по крайней мере мне так кажется.

Не вижу смысла выделять определенную ссылку как какую-то кнопку, однородным все должно быть.

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12446
Share on other sites

Все должно быть однородным, прошу убрать выделение кнопки "скачать":

post-8496-0-42350300-1365713713_thumb.jp

Ну вот как-то так. Иногда полезно для красивости сообщения выделять ссылку кнопочкой.

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12485
Share on other sites

Все должно быть однородным, прошу убрать выделение кнопки "скачать":

post-8496-0-42350300-1365713713_thumb.jp

Ну вот как-то так. Иногда полезно для красивости сообщения выделять ссылку кнопочкой.

Немного не понял, ты говоришь мне изменить стиль кнопки?

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12487
Share on other sites

За кнопку отвечает класс .download_button их ipdownloads.css

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12489
Share on other sites

Мое сообщение было ответом на это:

А вообще BB-код бесполезный, по крайней мере мне так кажется.

Не вижу смысла выделять определенную ссылку как какую-то кнопку, однородным все должно быть.

Ну раз однородным то и "Скачать" надо сделать просто ссылкой.
Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12490
Share on other sites

Все должно быть однородным, прошу убрать выделение кнопки "скачать":

Кнопка Скачать — структурный элемент этой страницы, к ней привязано главное действие. Это металлическая дверная ручка на коричневой деревянной двери, она должна выделяться, чтобы ее было видно.

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12494
Share on other sites

Кнопка Скачать — структурный элемент этой страницы, к ней привязано главное действие. Это металлическая дверная ручка на коричневой деревянной двери, она должна выделяться, чтобы ее было видно.

Вот это ты расписал Оо

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12496
Share on other sites

Кнопка Скачать — структурный элемент этой страницы, к ней привязано главное действие. Это металлическая дверная ручка на коричневой деревянной двери, она должна выделяться, чтобы ее было видно.

Ну а если я хочу так же на дверь повесить ручку только не используя структурных элементов, как то врезанный на заводе беспонтовый замок "крокодил", а красивенькую причиндалину "аллигатор". Разве нельзя? :sorry: А мне нравится, и пользуны мои оценили пользуются (пока правда больше балуются) оне у меня тормоза... Сложно привыкают к новому и хорошему...
Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12497
Share on other sites

Ну так я же написал, к этой ссылке прицепляется класс .download_button, который делает её такой кнопкой. Можно удалить все параметры класса и она будет выглядеть обычной ссылкой.

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=12510
Share on other sites
  • 10 месяцев спустя...

все хорошо и прекрасно

вопрос в другом

я ставлю скачивать файлы на 4-5 ФО

должна быть альтернатива для людей

как сообразить кнопки на ФО в бб кодах а не на один?

 

сейчас вставляю просто по шаблону заготовленому

спасибо

Link to comment
https://ipbmafia.ru/topic/1951-knopka-s-ssylkoj/?&do=findComment&comment=40778
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.