- Форум
- Шаблоны Joomla.
- HTML и CSS
- Кнопка CSS и её вывод
Кнопка CSS и её вывод
Иван / Автор темы \
Прохожий

1
0
9 года 5 мес. назад #6621 от Иван
Всем привет! Скажите пожалуйста как вывести кнопку на сайт в определенный модуль?
Я сгенерировал кнопку вот её CSS-кодНЕ могу вывести её и указать ссылку перехода на ней, помогите пожалуйста!
Я сгенерировал кнопку вот её CSS-код
.button {
border-top: 1px solid #fafdff;
background: #ba0028;
background: -webkit-gradient(linear, left top, left bottom, from(#bf000a), to(#ba0028));
background: -webkit-linear-gradient(top, #bf000a, #ba0028);
background: -moz-linear-gradient(top, #bf000a, #ba0028);
background: -ms-linear-gradient(top, #bf000a, #ba0028);
background: -o-linear-gradient(top, #bf000a, #ba0028);
padding: 20px 40px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 24px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #1d7099;
background: #1d7099;
color: #ccc;
}
.button:active {
border-top-color: #dfeaf2;
background: #dfeaf2;
}
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
Wedal

Администратор

2882
228
663
9 года 5 мес. назад #6623 от Wedal
Иван, вы сгенерировали оформление кнопки, но нужна еще ее структура в html.
Для того, чтобы вставить кнопку в модуль, нужно:
1) Переопределить макет модуля в используемый шаблон Joomla(о том, как это сделать: wedal.ru/uroki-joomla/joomla-17-layouts.html ).
2) В переопределенном файле макета добавить html-код кнопки. Если эта кнопка является просто ссылкой, то можно так:Но поскольку a - строчный элемент, нужно в CSS сделать его блоковым и задать размеры. К примеруЕще не советую использовать класс button. Обычно он по умолчанию добавляется ко всем кнопкам на сайте. Соответственно, ваши стили также применятся ко всем кнопкам. Лучше используйте класс mybutton или вроде того.
Для того, чтобы вставить кнопку в модуль, нужно:
1) Переопределить макет модуля в используемый шаблон Joomla(о том, как это сделать: wedal.ru/uroki-joomla/joomla-17-layouts.html ).
2) В переопределенном файле макета добавить html-код кнопки. Если эта кнопка является просто ссылкой, то можно так:
<a class="button" href="go.html">Перейти</a>
.button{
display:block;
width:100px;
height:30px
}
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
- Форум
- Шаблоны Joomla.
- HTML и CSS
- Кнопка CSS и её вывод