Как из обычной ссылки сделать красивую кнопку с эффектом нажатия?

Суббота, 12 мая 2012 года в 15:36      Просмотров: 3388

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

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

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

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

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

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

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



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


Сволочь, где обещанный бесплатный тренинг?! smile


Спокуха ребята. rolleyes Все будет!

Для тех, кто в танке - поясняю:

Я обещал, что с 10 мая начнется набор на бесплатный тренинг по верстке полноценного шаблона. Так вот, запустить набор 10 мая у меня не получилось, перегулял немного на праздниках. У моей мамы 8 был ДР, 9 – опять празднуем, ну и я приперся домой только вечером, 10 мая.

Поэтому, теперь внимание:

Набор на бесплатный тренинг "Верстаем своими руками" начнется с понедельника (14 мая 2012 года). Сразу замечу, что туда все не попадут, будет стоять ограничение. Слишком большое количество участников я не выдержу.

Все подробности узнаете в понедельник!


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


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

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

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


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

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

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

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

Комментариев: 29

1. Архип Риров
2012-05-12 в 18:32:17

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

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

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

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

Так держать!

vlad689

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

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

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

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

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

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

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

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

class="имя класса"

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

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

Спасибо !

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

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

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

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

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

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

Также вы можете оставить онлайн заявку здесь: [html_base64]PGEgaHJlZj0iaHR0cDovLzhzdGVwZW4ucnUvY29udGFjdCI+CiA8IURPQ1RZUEUgSFRNTD4KPGh0bWw+CjxoZWFkPgo8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+Cjx0aXRsZT7QntC90LvQsNC50L0g0LfQsNGP0LLQutCwINCyINCb0LDQsdC+0YDQsNGC0L7RgNC40Lgg0LzQtdCx0LXQu9C4IDgg0YHRgtC10L/QtdC90Yw8L3RpdGxlPgo8L2hlYWQ+Cgo8Ym9keT4KPHN0eWxlPgogICAgYm9keXtiYWNrZ3JvdW5kOiNjY2M7IGZvbnQ6MTZweCBWZXJkYW5hLCBHZW5ldmEsIHNhbnMtc2VyaWY7fQogICAgCiAgICAubWFpbnt3aWR0aDozMDBweDsgdGV4dC1hbGlnbjpjZW50ZXI7IHBhZGRpbmc6NTBweDsgYmFja2dyb3VuZDojZmZmOyBtYXJnaW46NTBweCBhdXRvOyBib3JkZXItcmFkaXVzOiAxMHB4OyBib3gtc2hhZG93OjAgMCA0cHggIzY2Njt9CiAgICAKICAgIC5idXR0b257YmFja2dyb3VuZDojMDA5ZWNjOyBwYWRkaW5nOiAyMHB4O2JvcmRlci1yYWRpdXM6IDEwcHg7IGJveC1zaGFkb3c6MXB4IDFweCA1cHggIzU1NTsgYm9yZGVyOjFweCBzb2xpZCAjZmZmOyBjb2xvcjojZmZmOyB0ZXh0LWRlY29yYXRpb246bm9uZTsKICAgIGxldHRlci1zcGFjaW5nOjFweDsgdGV4dC10cmFuc2Zvcm06dXBwZXJjYXNlOyB0ZXh0LXNoYWRvdzogMXB4IDFweCAzcHggIzY2NjsgZm9udC13ZWlnaHQ6Ym9sZDt9CiAgICAKICAgIC5idXR0b246aG92ZXJ7YmFja2dyb3VuZDojODFiODFhO30KCiAgICAuYnV0dG9uOmFjdGl2ZXtiYWNrZ3JvdW5kOiM3MGE3MDk7IGJvcmRlci1jb2xvcjojNWE3MzExOyBib3gtc2hhZG92OiBpbnNldCAwIDAgNXB4ICM2NjY7fQo8L3N0eWxlPgogICAKICAgIDxkaXYgY2xhc3M9Im1haW4iPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJidXR0b24iPtC+0L3Qu9Cw0LnQvSDQt9Cw0Y/QstC60LAg0LzQtdCx0LXQu9C4PC9hPgogICAgPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4KPC9hPg==[/html_base64]

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

<div class="main">
       <a href="contact" class="button">онлайн заявка</a>
</div>

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

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

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

<div class="main">

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

<a href="contact" class="button">онлайн заявка</a>

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

Оставьте комментарий!

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

Авторизация MaxSiteAuth. Войти через loginza

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