A- A A+
CSS - Кнопка

Сегодня рассмотрим первый пример создания красивых кнопок средствами CSS.

Шаг 1. Создаем модуль

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

Расширения = > Менеджер модулей => Создать => HTML-код.

Кнопка CSS

Шаг 2. Добавляем кнопку и ссылку

В редакторе модуля вставляем синтаксис ссылки и кнопки:

<a href="#"><button>ССЫЛКА</button></a>

Кнопка CSS

Проверяем результат. Кнопка появилась, но выглядит так себе.

Кнопка CSS

Шаг 3. Вставляем код кнопки в файл CSS

Так как, используется чистая Joomla, будет редактироваться файл template.css стандартного шаблона Джумлы - Protostar, расположенный по адресу: templates\protostar\css\

Кнопка CSS

Открываем файл и в самом конце вставляем следующий код:

.but1 {
   background-color: #000;
   background-image: linear-gradient(45deg,
      rgba(255,255,255,.0) 30%,
      rgba(255,255,255,.8),
      rgba(255,255,255,.0) 70%),
      radial-gradient(190% 100% at 50% 0%,
      rgba(255,255,255,.7) 0%,
      rgba(255,255,255,.5) 50%,
      rgba(0,0,0,0) 50%);
   background-position: 200% 0, 0 0;
   background-repeat: no-repeat;
   background-size: 200% 100%, auto;
   box-shadow: rgba(0,0,0,.3) 0 2px 5px;
   color: white;
   font-weight: bold;
   outline: none;
   padding: .8em 2em;
   position: relative;
   text-decoration: none;
   text-shadow: -1px -1px #000;
   user-select: none;
   width: 100%}
.but1:active {
   box-shadow: none;
   top: 1px; }
.but1:hover {
   background-position: -200% 0, 0 0;
   transition: .5s linear; }

Кнопка CSS

Шаг 4. Подключаем стиль к кнопке

Возвращаемся в модуль и добавляем кнопке класс - but1:

<a href="#"><button class="but1">ССЫЛКА</button></a>

Кнопка CSS

Теперь кнопка выглядит весьма презентабельно и при наведении происходит впечатляющий эффект, который в скриншоте отобразить нереально.

Кнопка CSS

До новых нестандартных кнопок!

 

Комментарии  

#3 0 Tim Erancev 06.03.2016 21:42
Кнопка из ссылки делается проще и без тега button...
спасибо за статью. я вечно эту конструкцию забываю, но без буттона быстрее и проще
Цитировать
#2 0 Луговской Александр 29.01.2015 09:23
Цитирую Влвадимир:
...кнопка появилась, но очень большая. Как уменьшить?

Специально для Вас - vitaliykulikov.ru/html-css/naznachaem-shirinu-width-dlya-knopok-sozdannykh-silami-css.html
Цитировать
#1 -1 Влвадимир 13.01.2015 08:42
У меня кнопка появилась, но очень большая. Как уменьшить?
Цитировать

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!