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

Продолжаем украшать сайты красивыми кнопками. Вслед за глянцевой и 3D-кнопкой, создадим… стеклянную!

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

В выбранный вами файл с расширением css добавляем следующий синтаксис:

.but3 {
   position: relative;
   display: inline-block;
   color: #777674;
    font-weight: bold;
   text-decoration: none;
   text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
   user-select: none;
    padding: 1em 2em;
    outline: none;
   border-radius: 3px / 100%;
   background-image:
       linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
        linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
       linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
        linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
        linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
       linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
   background-repeat: no-repeat;
   background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
    background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
    box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px; }
.but3:hover {
    transition: .5s linear;
    background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px); }
a.but3:active {
    top: 1px; }

Кнопка CSS

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

По традиции, в редакторе HTML-модуля вставляем кнопку с ссылкой, не забывая указывать класс:

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

Кнопка CSS

Шаг 3. Осторожно, стекло!

Теперь на сайте кнопка похожая на стеклянную, с ярким эффектом при наведении курсора.

Кнопка CSS

 

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

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

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

МОЙ TELEGRAM-КАНАЛ

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


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

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

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

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

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

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

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

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