Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Web мастеру » Делаем оригинальную кнопку на сайт (Дизайн сайта)
Делаем оригинальную кнопку на сайт
Kosten
Дата: Понедельник, 20.07.2015, 23:29 | Сообщение # 1
Администраторы
Сообщений:12675
Награды: 39


Как знает на сайт можно найти стили, которые поменяют все кнопки, которые есть на ресурсе. Но нам нужно сделать к примеру одну или несколько кнопок, кот тема пойдет за это. На многих порталах можно увидеть запись, что нажми на ее и перейдешь, но это согласитесь не очень красиво смотрится. Все можно сделать очень просто и загнать ее, эту надпись в красивую по дизайну кнопку. Вот к примеру, вы можете посмотреть, как получилось зайдя в ЛС нашего сайта. Первое что там было, это просто надписи, пришлось подобрать по дизайну и вот так получилось.



1) Давайте начнем со стандартной, которая отлично подойдет как на светлый и темный дизайн



Код
<button>Кнопка</button>


2) Теперь у нас будут присутствовать стили.



Код
<a href="#" class="knopka">Посмотреть описание</a>


Код
<style>
a.knopka {
color: #fff; /* цвет текста */
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: rgb(212,75,56); /* фон кнопки */
padding: .7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */
}
a.knopka:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */
a.knopka:active { background: rgb(152,15,0); } /* при нажатии */
</style>


3) Зеленый оттенок, при наведение крика она нажимается.



Код
<a href="#" class="button7">Добавить в корзину</a>


И стили, которые можно прописать ниже.

Код
<style>
a.button7 {
     font-weight: 700;
     color: white;
     text-decoration: none;
     padding: .8em 1em calc(.8em + 3px);
     border-radius: 3px;
     background: rgb(64,199,129);
     box-shadow: 0 -3px rgb(53,167,110) inset;
     transition: 0.2s;
}    
a.button7:hover { background: rgb(53, 167, 110); }
a.button7:active {
     background: rgb(33,147,90);
     box-shadow: 0 3px rgb(33,147,90) inset;
}
</style>


4) Теперь скажем светлый обвод на темном фоне.



Код
<a href="#" class="button8">Подключить</a>


И безусловно идут стили под нее, которые вы можете изменить.

Код
<style>
a.button8 {
    display: inline-block;
    color: white;
    font-weight: 700;
    text-decoration: none;
    user-select: none;
    padding: .5em 2em;
    outline: none;
    border: 2px solid;
    border-radius: 1px;
    transition: 0.2s;
}   
a.button8:hover { background: rgba(255,255,255,.2); }
a.button8:active { background: white; }
</style>


5) Это будет в светло желтом оттенке цвета, что такде темный и светлый фон подойдет для нее отлично.



Код
<a href="#" class="button24">Как у Сбербанка</a>


И как же без стилей, вы можете их прописать в CSS, только в начале и в конце не забываем убрать style а если ниже ставим с кнопкой, то оставляем как есть.

Код
<style>
a.button24 {
   display: inline-block;
   color: white;
   text-decoration: none;
   padding: .5em 2em;
   outline: none;
   border-width: 2px 0;
   border-style: solid none;
   border-color: #FDBE33 #000 #D77206;
   border-radius: 6px;
   background: linear-gradient(#F3AE0F, #E38916) #E38916;
   transition: 0.2s;
}  
a.button24:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
a.button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }
</style>
Прикрепления: 5851913.jpg(40Kb) · 7968092.jpg(3Kb) · 2626721.jpg(3Kb) · 5710080.jpg(3Kb) · 3885754.jpg(3Kb)


Kosten
Дата: Вторник, 21.07.2015, 00:01 | Сообщение # 2
Администраторы
Сообщений:12675
Награды: 39


6) Давайте теперь рассмотрим кнопку с градиентом.



Этот код ставим там где хотите видеть кнопку.

Код
<a href="#" class="button10">кнопка</a>


Клик сюда CSS чтоб скопировать стиль под материал.
Прикрепления: 1231308.jpg(2Kb)


Kosten
Дата: Вторник, 21.07.2015, 01:39 | Сообщение # 3
Администраторы
Сообщений:12675
Награды: 39


7) Здесь красивый эффект при нажатие или наведение курсора. И хочется заметить не одной ссылки нет.



Сам код под установление.

Код
<a href="#" class="button12" tabindex="0">кнопка</a>


И безусловно не обойтись без CSS на шикарный материал.
Прикрепления: 9141620.jpg(4Kb)


Kosten
Дата: Вторник, 21.07.2015, 01:43 | Сообщение # 4
Администраторы
Сообщений:12675
Награды: 39


8) Еще одна яркая по стили и оттенку кнопка для вашего сайта.



Код
<a href="#" class="button25">кнопка</a>


Незабываем про CSS и его установки.

9) Красивая темная кнопка, на темный и светлый фон.



Код:

Код
<a href="#" class="button28">Кнопка</a>


И здесь CSS под нее.

10) Это темная, можно сказать черная кнопка, которая еще и глянцевая, что ее вид становиться и красивый и оригинальный и безусловно на ней эффект очень запоминающий.



Код, где вы хотите установить, или у вас уже есть, просто теперь сделать ее в дизайне.

Код
<a href="#" class="button1">кнопка</a>


Здесь также есть CSS на стильность.
Прикрепления: 7015706.jpg(3Kb) · 7322748.jpg(2Kb) · 6999142.jpg(4Kb)


workman
Дата: Вторник, 21.07.2015, 01:43 | Сообщение # 5
Vip
Сообщений:1576
Награды: 7


Самое что мне нравится в данном материале так это то что эти кнопки сделаны без всяких дополнительных файлов (картинок), которые также могли подгружать сайт ... Особенно если его смотрят с телефонов и смартфонов

Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Kosten
Дата: Вторник, 21.07.2015, 01:44 | Сообщение # 6
Администраторы
Сообщений:12675
Награды: 39


workman, да, картинок нет, чисто на стилях.

Kosten
Дата: Вторник, 21.07.2015, 02:11 | Сообщение # 7
Администраторы
Сообщений:12675
Награды: 39


Эта кнопка понравилась своей прозрачностью, что даже сделал на ее DEMO чтоб посмотреть воочию. Правда выбрал под ее синий фон, что пришлось поменять оттенок цвета на знаках.



Код
<a href="#" class="button9">Кнопка на сайт</a>


Нажимаем ЗДЕСЬ чтоб получить стили.
Прикрепления: 2127670.jpg(3Kb)


Kosten
Дата: Вторник, 21.07.2015, 19:32 | Сообщение # 8
Администраторы
Сообщений:12675
Награды: 39


Все кнопки идут с эффектом, просто на форуме это невозможно показать, кроме первой кнопки, что представлена выше.

Kosten
Дата: Вторник, 21.07.2015, 21:35 | Сообщение # 9
Администраторы
Сообщений:12675
Награды: 39


Еще одна стильная кнопка, создана на чистых стилях. И при клике она утопает, что очень красиво смотрится и вы можете оценить ее ЗДЕСЬ в демонстраций.



Установка:

Ставим этот код, где вы видите свою кнопку.

Код
<a href="#" class="button17" tabindex="0">Кнопка стильная</a>


И стили под не в CSS прописать.
Прикрепления: 9458119.jpg(2Kb)


Форум про uCoz » Всё для web-мастера » Web мастеру » Делаем оригинальную кнопку на сайт (Дизайн сайта)
Страница 1 из 11
Поиск: