|
|
Модератор форума: dotbot |
Сообщество uCoz » Архивариус » Корзина » Как из этого сделать кнопочку ? (Уверен что это не сложно просто нужно знать как.) |
Как из этого сделать кнопочку ? |
Помогите разобраться.
Это в глобальном блоке. Код <div class="cnt oh"> <div class="process-block" data-animated="fadeInUp" > <i class="fa fa-lightbulb-o"></i> <span class="process-next"><i class="fa fa-chevron-right"></i></span><div class="process-name">-1</div></div> это в CSS Код #process { background: url(бла бла) center fixed no-repeat; background-size: cover; } #process .section { padding-bottom: 70px; } .process-block { float: left; width: 210px; height: 140px; margin-bottom: 30px; overflow: hidden; } .process-block:last-child { width: 120px; } .process-block > .fa { display: block; width: 120px; height: 80px; line-height: 80px; font-size: 36px; text-align: center; float: left; } .process-block .process-next { display: block; float: left; width: 90px; height: 80px; line-height: 80px; font-size: 18px; text-align: center; } .process-name { clear: both; color: #fff; width: 120px; text-align: center; line-height: 20px; padding-top: 20px; font-size: 14px; text-transform: uppercase; } |
|
Gidroballon, можно сделать проще без кучи ненужных стилей, что вы выше привели в пример:
Цитата <div class="knopka-button"><a href="ссылка по которой будем переходить при нажатии на кнопку">Название нашей кнопки</a></div> Данный код разместить в том месте где должна отображаться кнопка Код .knopka-button { color: white; padding: 5px 5px 5px 5px; background: rgb(58, 116, 166); display: inline-block; border-radius: 2px; border: 1px solid #068CEC; } .knopka-button a { color: white; text-decoration:none; } |
Хард, ссылка на мой сайт Спасибо
Добавлено (10 Ноя 2014, 11:49:33) |
Gidroballon, перейти в Панель управления - Главная - Дизайн - Управление дизайном - Глобальный блок(PROCESS), далее найти подобный код:
Цитата <div class="process-name">-1</div> Цитата <div class="process-name"><a href="ссылка куда перейти по нажатию">название кнопки</a></div> Цитата .process-name { clear: both; box-shadow: inset 0 0 0 2px #fff; color: #fff; width: 120px; text-align: center; line-height: 20px; padding-top: 10px; padding-bottom:10px; font-size: 14px; text-transform: uppercase; } Дополнительно добавить чуть ниже стили: Цитата .process-name a {color: white!important;} .process-name:hover { box-shadow: inset 0 0 0 2px rgba(255,214,0,0.88); color: #fff!important; } |
Ucoz_fan, И ещё миллион спасибо. Всё получилось. Всёполучилось. И первый, и второй вариант. А могу ли я сделать
то же с process-block 456 строка встилях CSS. Потрясающе! |
cтили данного класса отвечают за радиус то есть расстояние между блоками(не рекомендую что-то в данных стилях менять так как отображение блоков поменяется не в лучшую сторону и блоки могут сбиться и выстроить вертикально, что есть не хорошо).
|
Ucoz_fan, Спасибо. Какой же я нудный. Честно, последний вопрос. Можно ли сделать кнопкой то на что указывает стрелочка в рисунке ?
Чувствую что можно. Интуиция мне подсказывает что придётся Каждую кнопочку как бы отдельно делать. Так как они вроде часть целого элемента. Спасибо за терпение. Прикрепления:
2358586.jpg
(27.8 Kb)
|
можно сделать содержимое, а именно элемент который находится внутри сделать кнопкой и кликабельным, но здесь аналогично каждому классу нужно прописывать свои стили на подобии:
Цитата i.fa-pencil:before {visibility:hidden;} Цитата <a href="ссылка" class="fa-pencil"></a> |
Ucoz_fan, Человечище! Спасибо. Очень помогли!
Добавлено (10 Ноя 2014, 16:01:09) |
| |||
| |||