Как сделать кнопку в css с ссылкой + видео

Рубрика: Секреты верстки;
Метки:

Делаем из обычной ссылки красивую кнопку.

Всем привет! smile

Сегодня я записал для вас видеоурок, в котором показываю, как из обычной ссылки (тег A) сделать полноценную "кнопищу" при помощи CSS3.

Урок получился интересный, сугубо практический – воды 0%. Поэтому, он только для тех, кто любит что-то делать своими руками. Готового кода кнопки я не дам, а все покажу, как надо делать, в видео.

В нем мы будем разбирать:

  • Как обычную ссылку сделать кнопкой, реагирующей на нажатие.
  • Как присобачить градиент через CSS.
  • Скругление углов.
  • Создание тени.
  • И буду объяснять кучу других правил CSS по ходу урока.

Вот то, что у ВАС получится после урока

Но перед просмотром хочу сделать маленькую новость, потому как многие подписчики уже крутят в своих головах довольно таки милый вопрос:


Теперь по теме, урок в относительно "хорошем" качестве можно посмотреть онлайн через ютуб:


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

А еще можете скачать урок к себе на комп в отличном качестве (HD 1280х720).

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


Загрузка замка...

На этом все, надеюсь было интересно. Оставляйте свои впечатления и замечания в комментариях.

PS: Обратите внимание, что цвет кнопки вы можете указать свой, какой только захотите. Впрочем как и все остальное – отступы, размер, тень, градиент и так далее.

Пользуйтесь на здоровье!

Комментариев: 30 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 30
  •  Архип Риров | 12 мая 2012 в 18:32:17

    А где такую форму рассказа в соцсетях взял?

  •  Серёга | 13 мая 2012 в 14:23:37

    Это пока тестируемая форма.

  •  DEnis | 13 мая 2012 в 16:31:35

    Помоги с сайтом !Плыззз)

  •  vlad689 | 14 мая 2012 в 13:02:53

    Серега, ты молодец!

    Скрипту без году неделя, а ты его уже используешь.

    По моему мнению, он здорово срабатывает.

    Так держать!

    vlad689

  •  Серёга | 14 мая 2012 в 13:50:05

    Я его просто потом хочу по партнерской ссылке порекомендовать.

    Но сначала, хочу сам испытать, что бы показать результаты использования на практике.

  •  Антон Забашта | 15 мая 2012 в 15:06:41

    А саму ссылку как вставить?

  •  Серёга | 15 мая 2012 в 17:23:52

    Антон, это и есть ссылка.

    Просто она выглядит как кнопка.

    описываешь в CSS внешний вид, а ссылке просто присобачиваешь класс, который в CSS описал, вот и все.

  •  Антон Забашта | 15 мая 2012 в 18:51:55

    Ну хорошо а как на сайт вставить?

  •  Серёга | 15 мая 2012 в 21:21:44

    Ну блин, Антон, это самые основы.

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

    Затем в коде этой ссылке присваиваешь класс.

    class="имя класса"
  •  Антон Забашта | 16 мая 2012 в 19:26:11

    Все спасибо!

  •  Сергей | 10 сентября 2012 в 11:42:34

    Я герой. Но не качается урок-то!

  •  Серёга | 10 сентября 2012 в 15:22:44

    Какая ошибка?

  •  Сергей | 12 сентября 2012 в 13:04:26

    Вот теперь Аллес - нормалес ! Минуты не прошло. 15 метров скачал.

    А тогда зависало и не качалось.

    Спасибо !

    Скажи Серж, а можно тебе прислать определенный скрипт или урок, с забугорного сайта, что бы ты в своих лучших традициях перевел и по полочкам "разобрал" его на понятном для нас (новичков) языке? Ведь порой читаешь, все делаешь как "доктор прописал"...И ни хрена не работает. А мелочь...Лишняя подсказка, оказывается ключевой. А автор туториала не отвечает. Отмалчивается ! Ну и конечно " до свиданья " сайт ( блог ) со "стыбренным" материалом...В черный список...smile

  •  Серёга | 12 сентября 2012 в 14:13:46

    Если штука интересная - могу попробовать.

  •  Татьяна | 28 ноября 2012 в 15:10:09

    Серёг, подскажи плиз, если не замучала тебя. Кнопка вставилась, но появились 2 проблемыdowner:

    1. ссылка вылезла за границы сайта с правой стороны. Ну и вопрос, как её худее сделать?

    2. я ей ставлю ссылку на страницу 8stepen.ru/contact, а она меня возвращает на текущую страницу 8stepen.ru/kontacty

    Вопрос номер 2, как её направить правильно?

    Просто хочется быстрей доделать сайт. Поможешь?yes

  •  Татьяна | 28 ноября 2012 в 15:13:31
    Также вы можете оставить онлайн заявку здесь: [html_base64]PGEgaHJlZj0iaHR0cDovLzhzdGVwZW4ucnUvY29udGFjdCI+CiA8IURPQ1RZUEUgSFRNTD4KPGh0bWw+CjxoZWFkPgo8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+Cjx0aXRsZT7QntC90LvQsNC50L0g0LfQsNGP0LLQutCwINCyINCb0LDQsdC+0YDQsNGC0L7RgNC40Lgg0LzQtdCx0LXQu9C4IDgg0YHRgtC10L/QtdC90Yw8L3RpdGxlPgo8L2hlYWQ+Cgo8Ym9keT4KPHN0eWxlPgogICAgYm9keXtiYWNrZ3JvdW5kOiNjY2M7IGZvbnQ6MTZweCBWZXJkYW5hLCBHZW5ldmEsIHNhbnMtc2VyaWY7fQogICAgCiAgICAubWFpbnt3aWR0aDozMDBweDsgdGV4dC1hbGlnbjpjZW50ZXI7IHBhZGRpbmc6NTBweDsgYmFja2dyb3VuZDojZmZmOyBtYXJnaW46NTBweCBhdXRvOyBib3JkZXItcmFkaXVzOiAxMHB4OyBib3gtc2hhZG93OjAgMCA0cHggIzY2Njt9CiAgICAKICAgIC5idXR0b257YmFja2dyb3VuZDojMDA5ZWNjOyBwYWRkaW5nOiAyMHB4O2JvcmRlci1yYWRpdXM6IDEwcHg7IGJveC1zaGFkb3c6MXB4IDFweCA1cHggIzU1NTsgYm9yZGVyOjFweCBzb2xpZCAjZmZmOyBjb2xvcjojZmZmOyB0ZXh0LWRlY29yYXRpb246bm9uZTsKICAgIGxldHRlci1zcGFjaW5nOjFweDsgdGV4dC10cmFuc2Zvcm06dXBwZXJjYXNlOyB0ZXh0LXNoYWRvdzogMXB4IDFweCAzcHggIzY2NjsgZm9udC13ZWlnaHQ6Ym9sZDt9CiAgICAKICAgIC5idXR0b246aG92ZXJ7YmFja2dyb3VuZDojODFiODFhO30KCiAgICAuYnV0dG9uOmFjdGl2ZXtiYWNrZ3JvdW5kOiM3MGE3MDk7IGJvcmRlci1jb2xvcjojNWE3MzExOyBib3gtc2hhZG92OiBpbnNldCAwIDAgNXB4ICM2NjY7fQo8L3N0eWxlPgogICAKICAgIDxkaXYgY2xhc3M9Im1haW4iPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJidXR0b24iPtC+0L3Qu9Cw0LnQvSDQt9Cw0Y/QstC60LAg0LzQtdCx0LXQu9C4PC9hPgogICAgPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4KPC9hPg==[/html_base64]
  •  Татьяна | 28 ноября 2012 в 15:50:42

    Упс, со второй проблемой справилась сама. Осталась первая

  •  Серёга | 28 ноября 2012 в 18:26:42

    А где я могу увидеть эти кнопки?

  •  Татьяна | 28 ноября 2012 в 19:22:46

    smileО, Серёг, ты как всегда оперативно. Как ты только успеваешь?http://8stepen.ru/kontakty

  •  Серёга | 29 ноября 2012 в 01:31:20

    Обрати внимание в какой блок ты вставила кнопку ;)

    <div class="main">
           <a href="contact" class="button">онлайн заявка</a>
    </div>
  •  Татьяна | 29 ноября 2012 в 17:05:40

    Серёга, а можно без обрати внимание. Я ничё не поняла. Как нужно? Сделала всё, как на видео, причём всё работает, ширина только где-то не там или не та. Если я в цитируемой тобой строке пишу не "contact", а что нибудь другое, то вообще ссылка перестаёт работать. Или не то пишу?

  •  Серёга | 3 декабря 2012 в 14:34:38

    На видео я показывал на пустой странице.

    И там можно было использовать

    <div class="main">

    В общем - оставь только:

    <a href="contact" class="button">онлайн заявка</a>
  •  Серёга | 3 декабря 2012 в 14:35:13

    А ну и ссылка - у тебя куда должна вести? На какую страницу?

  •  Татьяна | 3 декабря 2012 в 14:41:46

    Ссылка уже правильно ведёт. Спасибо, Серёга, буду разбираться.

  •  Татьяна | 3 декабря 2012 в 14:51:40

    А теперь ниже сделать, а то кнопка налезла на строчку. Пробелы не помогают.

  •  Серёга | 3 декабря 2012 в 15:30:23
    <div>a href="contact" class="button">онлайн заявка</a></div>
  •  Татьяна | 3 декабря 2012 в 16:44:48

    Серёг, а знаешь, как я справилась? Голь на выдумки хитра. Чтобы подвинуть кнопку ниже и сделать пробелы после неё, просто написала текст выше и ниже кнопки белым цветом на белом фоне. Всё работает, без всяких div. Я уже устала от них. А сайт наполнен только на половину. Ещё "дивовать и дивовать". Самое обидное, что просмотров много, а клиентов мало. Сайт уже по многим позициям на первых страницах в поиске Гугл. Яндекс пока отмалчивается.

  •  Владимир | 26 апреля 2013 в 22:02:24

    Сможешь дать все скрепы ?

  •  Серёга | 27 апреля 2013 в 10:02:37
    Сможешь дать все скрепы ?

    Это что такое? smile

  •  Аноним | 10 декабря 2015 в 06:39:51

    Прикольно в следуйщем видео пока html код твоего сайта