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

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

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;

}

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

Цитата

Respected and podvorie
2

18 октября, 201212 yr

Author

Обновленно

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

Цитата

18 октября, 201212 yr

Пробоваю.

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

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

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

Цитата

18 октября, 201212 yr

Author

Пробоваю.

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

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

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

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

+

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

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

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

Цитата

18 октября, 201212 yr

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

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

Цитата

18 октября, 201212 yr

Author

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

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

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

Цитата

18 октября, 201212 yr

Нет. Не робит

Enkidu 3D Tags Cloud 1.0.2.rar

Цитата

18 октября, 201212 yr

Author


.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

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

Цитата

18 октября, 201212 yr

Author

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

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

Цитата

18 октября, 201212 yr

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

core.php

Цитата

18 октября, 201212 yr

Author

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

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

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

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

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


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

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

Цитата

18 октября, 201212 yr

:yahoo: :yahoo: :yahoo:

Цитата

18 октября, 201212 yr

Author

:yahoo:

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

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

Цитата

19 октября, 201212 yr

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

Нет.

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

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

Цитата

19 октября, 201212 yr

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

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

Цитата

19 октября, 201212 yr

Author

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

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

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

Цитата

19 октября, 201212 yr

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

Цитата

19 октября, 201212 yr

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

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

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

Цитата

19 октября, 201212 yr

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

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

Цитата

19 октября, 201212 yr

Author

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

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

Цитата

19 октября, 201212 yr

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

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

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

Цитата

19 октября, 201212 yr

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

Цитата

_Dark_
1

21 августа, 201311 yr

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

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

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

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

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

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

спасибо

Цитата

Sign In

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

Featured Replies

Join the conversation

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

Account

Navigation

Messages

Уведомления

Search