Как создать красивую анимированную текстовую кнопку без flash. - Joomla 1.5: Общие вопросы

ElenaElena...

Ну Вы хотя бы с общими принципами функционирования движка Joomla ознакомьтесь сначала, а потом уже задавайте такие вопросы.
Чтобы вставить код идете в админку - менеджер модулей - создать - HTML код, вставляете, выбираете позицию, сохраняете.

.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -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: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

Вам правильно Monix ответил выше, кнопка - чистый CSS, а насчет точечки - это модуль последних новостей, их море, выбирайте любой.

Там флеш и близко не стоял

Taatshi, я не совсем понимаю каким образом Вы собираетесь ее выводить, если она уже существует на сайте.
Насколько я понял, нужно на CSS прописать кнопку, которая будет занимать целиком модуль.
Решение я нашел в следующем - прописал данный код в template.php, предварительно заменив .button на #button
Затем создал в модулях произвольный html-код, вставил туда следующее

Код

<a href="/index.php"><span><p id="button">Пробный текст</p></span></a>

Результат - текст внутри кнопки в указанной мной позиции, со ссылкой на индексную страницу.
Если я где-то неправ, поправьте
 
ElenaElena, надеюсь, хоть чем-то помог.

А можно ли такое сделать не изменяя шаблон?

Taatshi, я не совсем понимаю каким образом Вы собираетесь ее выводить, если она уже существует на сайте.
Насколько я понял, нужно на CSS прописать кнопку, которая будет занимать целиком модуль.
Решение я нашел в следующем - прописал данный код в template.php, предварительно заменив .button на #button
Затем создал в модулях произвольный html-код, вставил туда следующее

Код

<a href="/index.php"><span><p id="button">Пробный текст</p></span></a>

Результат - текст внутри кнопки в указанной мной позиции, со ссылкой на индексную страницу.
Если я где-то неправ, поправьте
 
ElenaElena, надеюсь, хоть чем-то помог.

/*****************************************/
/***Elena Buttons***/
/*****************************************/
#button1 {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -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: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
 #button1:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
 #button1:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

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

...но похоже это не тот файл.

клиент сам не знает что хочет

Вот. Начинается. Вы объясните, что именно и куда именно Вы хотите вставить. Конкретно.

ElenaElena,
 - посмотрите, содержит ли этот файл теги <head></head> - если да, то скорее всего это правильный файл.

Описанный мной способ позволяет создать не кнопки, а DIV блок, который меняет цвет при наведении, и является практически той же кнопкой, описанной посредством CSS. Этот блок условно называется button, и его свойства описываются в файле template.css.

Вставив этот блок в в модуль с помощью кода, который я дал, вы тем самым отображаете его в данном модуле; так же имеется возможность ввести в него любой текст. про блочную div верстку читайте, пожалуйста здесь.

Еще почитайте про как пользоваться тегами на форуме здесь, а то у вас ссылки в последнем сообщении дикие и никуда не ведут.
 - выясняйте, мы тоже не знаем, а телепаты в отпуске.

Если не разберетесь - помогу, пишите лучше в аську или в ЛС.

У меня есть вот такой шаблон
Но заказчик захотел, три цветные кнопки как на сайте vizitka.com
Как запихнуть эти кнопки в top1 top2 top3 или все три в top2.

Скопируйте стили и ресурсы. Вставьте себе на сайт.

ElenaElena, внимание, фокус! Специально для Вас.


Скачиваете два изображения отсюда и отсюда и кидаете в папку images/stories/
Потом создаете модуль (html-код), вставляете туда вот этот код и сохраняете. Все. Свои кнопки можно потом нарисовать.

Код

<a href="index.php">
<img src="images/stories/button-green-light.png" 
onmouseover="this.src='images/stories/button-green-dark.png';" 
onmouseout="this.src='images/stories/button-green-light.png';" 
style="float: right; border: 0;" border="0" width="150" /> 
</a>