Кнопка CSS и её вывод

Иван
Автор темы
Не в сети
Новый участник

Больше

10 года 11 мес. назад #6621 от Иван

Иван создал тему: Кнопка CSS и её вывод

Всем привет! Скажите пожалуйста как вывести кнопку на сайт в определенный модуль?
Я сгенерировал кнопку вот её CSS-код

Code:

.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
Не в сети
Администратор

Больше

10 года 11 мес. назад #6623 от Wedal

Wedal ответил в теме Кнопка CSS и её вывод

Иван, вы сгенерировали оформление кнопки, но нужна еще ее структура в html.
Для того, чтобы вставить кнопку в модуль, нужно:
1) Переопределить макет модуля в используемый шаблон Joomla(о том, как это сделать: wedal.ru/uroki-joomla/joomla-17-layouts.html ).
2) В переопределенном файле макета добавить html-код кнопки. Если эта кнопка является просто ссылкой, то можно так:

Code:

<a class="button" href="go.html">Перейти</a>

Но поскольку a - строчный элемент, нужно в CSS сделать его блоковым и задать размеры. К примеру

Code:

.button{
display:block;
width:100px;
height:30px
}

Еще не советую использовать класс button. Обычно он по умолчанию добавляется ко всем кнопкам на сайте. Соответственно, ваши стили также применятся ко всем кнопкам. Лучше используйте класс mybutton или вроде того.

Пожалуйста Войти или Зарегистрируйтесь, чтобы присоединиться к беседе.