Как из обычной ссылки сделать красивую кнопку с эффектом нажатия?
Всем привет!
Сегодня я записал для вас видеоурок, в котором показываю, как из обычной ссылки (тег A) сделать полноценную "кнопищу" при помощи CSS3.
Урок получился интересный, сугубо практический – воды 0%. Поэтому, он только для тех, кто любит что-то делать своими руками. Готового кода кнопки я не дам, а все покажу, как надо делать, в видео.
В нем мы будем разбирать:
- Как обычную ссылку сделать кнопкой, реагирующей на нажатие.
- Как присобачить градиент через CSS.
- Скругление углов.
- Создание тени.
- И буду объяснять кучу других правил CSS по ходу урока.
Вот то, что у ВАС получится после урока:
Но перед просмотром хочу сделать маленькую новость, потому как многие подписчики уже крутят в своих головах довольно таки милый вопрос:
Сволочь, где обещанный бесплатный тренинг?!
Спокуха ребята. Все будет!
Для тех, кто в танке - поясняю:
Я обещал, что с 10 мая начнется набор на бесплатный тренинг по верстке полноценного шаблона. Так вот, запустить набор 10 мая у меня не получилось, перегулял немного на праздниках. У моей мамы 8 был ДР, 9 – опять празднуем, ну и я приперся домой только вечером, 10 мая.
Поэтому, теперь внимание:
Теперь по теме, урок в относительно "хорошем" качестве можно посмотреть онлайн через ютуб:
Для прохождения урока понадобится файл-заготовка, можно сделать его самому, а можно воспользоваться готовым вариантом, скачав его у меня.
А еще можете скачать урок к себе на комп в отличном качестве (HD 1280х720).
Ниже идет окно с кнопками социальных сетей, щелкаете на любую из них, и автоматически появятся ссылки на скачивание урока и файла заготовки. Просто жми на любую кнопку соцсети и сам все поймешь:
На этом все, надеюсь было интересно. Оставляйте свои впечатления и замечания в комментариях.
PS: Обратите внимание, что цвет кнопки вы можете указать свой, какой только захотите. Впрочем как и все остальное – отступы, размер, тень, градиент и так далее.
Пользуйтесь на здоровье!
Комментариев: 29
2012-05-12 в 18:32:17
А где такую форму рассказа в соцсетях взял?
2012-05-13 в 14:23:37
Это пока тестируемая форма.
2012-05-13 в 16:31:35
Помоги с сайтом !Плыззз)
2012-05-14 в 13:02:53
Серега, ты молодец!
Скрипту без году неделя, а ты его уже используешь.
По моему мнению, он здорово срабатывает.
Так держать!
vlad689
2012-05-14 в 13:50:05
Я его просто потом хочу по партнерской ссылке порекомендовать.
Но сначала, хочу сам испытать, что бы показать результаты использования на практике.
2012-05-15 в 15:06:41
А саму ссылку как вставить?
2012-05-15 в 17:23:52
Антон, это и есть ссылка.
Просто она выглядит как кнопка.
описываешь в CSS внешний вид, а ссылке просто присобачиваешь класс, который в CSS описал, вот и все.
2012-05-15 в 18:51:55
Ну хорошо а как на сайт вставить?
2012-05-15 в 21:21:44
Ну блин, Антон, это самые основы.
Заводишь в стилях своего сайта класс, в котором описываешь внешний вид ссылки.
Затем в коде этой ссылке присваиваешь класс.
2012-05-16 в 19:26:11
Все спасибо!
2012-09-10 в 11:42:34
Я герой. Но не качается урок-то!
2012-09-10 в 15:22:44
Какая ошибка?
2012-09-12 в 13:04:26
Вот теперь Аллес - нормалес ! Минуты не прошло. 15 метров скачал.
А тогда зависало и не качалось.
Спасибо !
Скажи Серж, а можно тебе прислать определенный скрипт или урок, с забугорного сайта, что бы ты в своих лучших традициях перевел и по полочкам "разобрал" его на понятном для нас (новичков) языке? Ведь порой читаешь, все делаешь как "доктор прописал"...И ни хрена не работает. А мелочь...Лишняя подсказка, оказывается ключевой. А автор туториала не отвечает. Отмалчивается ! Ну и конечно " до свиданья " сайт ( блог ) со "стыбренным" материалом...В черный список...
2012-09-12 в 14:13:46
Если штука интересная - могу попробовать.
2012-11-28 в 15:10:09
Серёг, подскажи плиз, если не замучала тебя. Кнопка вставилась, но появились 2 проблемы:
1. ссылка вылезла за границы сайта с правой стороны. Ну и вопрос, как её худее сделать?
2. я ей ставлю ссылку на страницу 8stepen.ru/contact, а она меня возвращает на текущую страницу 8stepen.ru/kontacty
Вопрос номер 2, как её направить правильно?
Просто хочется быстрей доделать сайт. Поможешь?
2012-11-28 в 15:13:31
2012-11-28 в 15:50:42
Упс, со второй проблемой справилась сама. Осталась первая
2012-11-28 в 18:26:42
А где я могу увидеть эти кнопки?
2012-11-28 в 19:22:46
О, Серёг, ты как всегда оперативно. Как ты только успеваешь?http://8stepen.ru/kontakty
2012-11-29 в 01:31:20
Обрати внимание в какой блок ты вставила кнопку ;)
2012-11-29 в 17:05:40
Серёга, а можно без обрати внимание. Я ничё не поняла. Как нужно? Сделала всё, как на видео, причём всё работает, ширина только где-то не там или не та. Если я в цитируемой тобой строке пишу не "contact", а что нибудь другое, то вообще ссылка перестаёт работать. Или не то пишу?
2012-12-03 в 14:34:38
На видео я показывал на пустой странице.
И там можно было использовать
В общем - оставь только:
2012-12-03 в 14:35:13
А ну и ссылка - у тебя куда должна вести? На какую страницу?
2012-12-03 в 14:41:46
Ссылка уже правильно ведёт. Спасибо, Серёга, буду разбираться.
2012-12-03 в 14:51:40
А теперь ниже сделать, а то кнопка налезла на строчку. Пробелы не помогают.
2012-12-03 в 15:30:23
2012-12-03 в 16:44:48
Серёг, а знаешь, как я справилась? Голь на выдумки хитра. Чтобы подвинуть кнопку ниже и сделать пробелы после неё, просто написала текст выше и ниже кнопки белым цветом на белом фоне. Всё работает, без всяких div. Я уже устала от них. А сайт наполнен только на половину. Ещё "дивовать и дивовать". Самое обидное, что просмотров много, а клиентов мало. Сайт уже по многим позициям на первых страницах в поиске Гугл. Яндекс пока отмалчивается.
2013-04-26 в 22:02:24
Сможешь дать все скрепы ?
2013-04-27 в 10:02:37
Это что такое?