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

Posted 18 октября, 201212 yr

comment_12350

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;

}

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

Цитата

podvorie and Respected
2

18 октября, 201212 yr

Author

comment_12391

Обновленно

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

Цитата

18 октября, 201212 yr

comment_12392

Пробоваю.

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

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

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

Цитата

18 октября, 201212 yr

Author

comment_12393

Пробоваю.

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

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

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

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

+

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

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

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

Цитата

18 октября, 201212 yr

comment_12394

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

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

Цитата

18 октября, 201212 yr

Author

comment_12395

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

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

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

Цитата

18 октября, 201212 yr

comment_12396

Нет. Не робит

Enkidu 3D Tags Cloud 1.0.2.rar

Цитата

18 октября, 201212 yr

Author

comment_12398


.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

Внешний вид >
Управление стилями и шаблонами >
Управление шаблонами ваш стиль
В этом файле :

и добавь в самый низ это :


.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;

}

Цитата

18 октября, 201212 yr

comment_12401

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

Цитата

18 октября, 201212 yr

Author

comment_12402

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

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

Цитата

18 октября, 201212 yr

comment_12403

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

core.php

Цитата

18 октября, 201212 yr

Author

comment_12404

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

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

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

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

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


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

Edited 18 октября, 201212 yr by Pashok(one)

Цитата

18 октября, 201212 yr

comment_12405

:yahoo: :yahoo: :yahoo:

Цитата

18 октября, 201212 yr

Author

comment_12406

:yahoo:

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

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

Цитата

19 октября, 201212 yr

comment_12446

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

Нет.

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

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

Цитата

19 октября, 201212 yr

comment_12485

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

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

Цитата

19 октября, 201212 yr

Author

comment_12487

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

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

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

Цитата

19 октября, 201212 yr

comment_12489

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

Цитата

19 октября, 201212 yr

comment_12490

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

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

Ну раз однородным то и "Скачать" надо сделать просто ссылкой.

Цитата

19 октября, 201212 yr

comment_12494

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

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

Цитата

19 октября, 201212 yr

Author

comment_12496

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

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

Цитата

19 октября, 201212 yr

comment_12497

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

Ну а если я хочу так же на дверь повесить ручку только не используя структурных элементов, как то врезанный на заводе беспонтовый замок "крокодил", а красивенькую причиндалину "аллигатор". Разве нельзя? :sorry:

А мне нравится, и пользуны мои оценили пользуются (пока правда больше балуются) оне у меня тормоза... Сложно привыкают к новому и хорошему...

Цитата

19 октября, 201212 yr

comment_12510

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

Цитата

_Dark_
1

21 августа, 201311 yr

comment_40778

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

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

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

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

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

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

спасибо

Цитата

Sign In

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

Featured Replies

Join the conversation

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

Account

Navigation

Messages

Уведомления

Search