Для создания кнопки, которая выполняет какой-либо JavaScript-код отлично подходят блоки div.
Но изначально они не оформлены должным образом. Это и нужно исправить начинающему верстальщику.
Для начала допустим, что мы уже создали html (хоть на рабочем столе).
Запишем в него, например, это:
Это базовый файл, с которого всегда можно начинать верстать любую веб-страницу.
Теперь добавим style и, собственно, сам div:
И вот что получилось:
Свойство display:inline делает блок div строчным элементом. И теперь с ним можно работать, как с частью текстового контента сайта.
Но на красивую кнопку это, пока что, мало похоже.
Для придания кнопке приятного вида можно изменить цвет и отступы текста.
И получится:
вот это. Давайте представим, что нам она понравилась. Осталось показать, что этот блок ведёт себя, как кнопка.
Для этого необходимо сделать так называемый ховер (от англ. hover). Давайте добавим в style:
Попробуйте навести на эту кнопку мышью и курсор изменится, благодаря свойству cursor:pointer, а цвет изменится из-за псевдокласса hover (и background, разумеется)
Маленький бонус за то, что дочитали - круглая кнопка:
Спасибо за внимание.
1 2 3 4 5 6 | <html> <head> </head> <body> </body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <style> div.button{ display:inline; background:#FF7733; } </style> </head> <body> <div class='button'></div> </body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <style> div.button{ display:inline; padding:15px; color:#FFFFFF; background:#FF7733; } </style> </head> <body> <div class='button'></div> </body></html> |
1 2 3 | div.button:hover{ background:#FF5500;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <style> div.button{ border-radius:50px; width:100px; height:100px; color:#FFFFFF; background:#FF7733; cursor:pointer; line-height:100px; text-align:center; } div.button:hover{ background:#FF5500; } </style> </head> <body> <div class='button'></div> </body></html> |