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

На очереди вторая кнопка, теперь с эффектом 3D.

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

Открываем файл css вашего шаблона. Здесь не может быть общей рекомендации, какой именно файл css использовать. Особенно в случаях использования сложных шаблонов, созданных на фреймворках. Как выбрать нужный файл css будет рассказано в ближайших уроках.

В любом месте файла вставляем следующие css-правила:

.but2, .but2:before {
   width: 100%;
   border: solid rgb(4,88,192);
   border-radius: 100px;
   border-width: 3px 10px;
   color: #fff;
   display: inline-block;
   font-size: 20px;
   opacity: 1;
   outline: none;
   padding: 8px 15px;
   text-decoration: none;
   transition: .6s, opacity 0s 9999999s, visibility 0s 9999999s;
}
.but2 {
   background: linear-gradient(to left, rgb(62,153,239) 1%, #fff 3%,
      rgb(44,135,232) 8%, rgba(255,255,255,.3) 50%,
      rgb(44,135,232) 92%, #fff 97%,
      rgb(62,153,239) 99%) no-repeat;
   border: 1px solid rgba(62,153,239,.5);
   padding: calc(8px + 3px - 1px) calc(15px + 10px - 1px);
   position: relative; }
.but2:before {
   content: "ССЫЛКА";
   background: #fff linear-gradient(rgb(58,160,253),
   rgb(4,88,192) 60%, rgb(49,112,201));
   bottom: -7px;
   box-shadow: 0 10px 18px rgba(0,0,0,.5);
   left: -1px;
   position: absolute;
   width: calc(100% - (15px + 10px - 1px)*2); }
.but2:hover {
   transform: scale(1.1, 1.1);
   -webkit-transform: scale(1.1, 1.1); }
.but2:hover:before {
   background: #fff linear-gradient(#3fadff, #0766d8 60%, #3279dd);
   border-color: #0766d8; }
.but2:focus, .but2:active {
   opacity: 0;
   transform: scale(2, 2);
   transition: .4s;
   visibility: hidden;
   -webkit-transform: scale(2, 2); }

Кнопка CSS

Вставка кнопки в материал

Если вам необходимо вставить код кнопки в статью, измените значение свойства width: 100%, например на 150px. То есть укажите свою ширину кнопку.

Кнопка CSS

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

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

<a href="#"><button class="but2">КНОПКА</button></a>

Кнопка CSS

Шаг 3. Проверяем результат

Открываем сайт, где нас ждет внушительная кнопка.

Кнопка CSS

Наводим курсор и получаем 3D-эффект.

Кнопка CSS

И это еще не все. При нажатии на кнопку, она пропадает, как будто лопнул мыльный пузырь!

Не пугайтесь, перезагрузка страницы, возвращает кнопку на место.

Надпись на кнопке

Обратите внимание, что в модуле мы указали якорь ссылки – «КНОПКА», а вывелась надпись «ССЫЛКА».

Это связано с свойством content.

Кнопка CSS

Данное свойство используется для вставки контента, которого нет на странице, и как видите имеет приоритет перед якорем ссылки.

Чтобы изменить надпись на кнопке, впишите в свойство content свое значение, например «Сайт».

Кнопка CSS

Проверяем.

Кнопка CSS

P.S. Если появились кракозябры, сохраните файл css в кодировке UTF-8 (без BOM).

 

Комментарии  

#1 0 Евгения Царенко 24.05.2015 16:02
А не могли бы Вы рассказать, как сделать кнопку из картинки? Что бы она при нажатии менялась, например с цветной на черно-белую. В сети много примеров, но для Joomla нет подходящих (я не спец, конечно могу и ошибаться).
Цитировать

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

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

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

МОЙ TELEGRAM-КАНАЛ

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


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

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

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

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

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

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

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

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