Как в html сделать кнопку

     

     

    Кнопка HTML. Здравствуйте уважаемые начинающие веб-мастера. В предыдущей статье мы научились создавать рамки. В этой статье я покажу Вам несколько вариантов html кода для кнопок которые создаются при помощи тега button . Тег button не является блочным элементом, и его можно вставлять в другие теги HTML. Тем более это нужно делать, ведь обычно кнопка располагается как отдельный элемент, и если её не поместить в блок ( p или div ), то она расположиться в конце той строки, которая находится перед ней. Первый пример рассмотрим в HTML документе, а в остальных будет изменяться только содержание тега body. А вот результат, можно пощёлкать. Следующую кнопку сделаем с применением тегов таблиц. К сожалению настройки моей темы не позволяют показать действующий образец, а менять их из-за одной кнопки что-то не хочется, поэтому показываю картину. Действует она точно так же как и первая, только вид немного другой. Кстати, если добавить в тег table атрибуты таблиц, то можно этот вид изменить ещё больше. Дальше немного интереснее, так как в следующем примере мы в тег button , введём атрибут style . А это значит, что кнопке можно будет придать какое либо оформление. Результат действующий, можно пощёлкать, и посмотреть, как кнопка работает. Давайте подробно рассмотрим, какие свойства мы применили для оформления. 1. background: #fdeaa8; — цвет кнопки; 2. width: 80px; — ширина кнопки; 3. height: 40px; — высота кнопки; 4. border-radius: 5px; — закруглённые уголки, если вместо 5px поставить 50%/50%, то кнопка станет округлой; 5. box-shadow: 0px 1px 3px; — создаёт тень, делает кнопку более выпуклой; 6. font-size: 20px; — размер текста; В тег button можно вставить и картинку. Ещё один атрибут, который можно применить для кнопки — это title . Его действие заключается в том, что при наведении курсора на кнопку, будет появляться окно подсказки, с текстом, который мы в этот атрибут введём. Обычно в нём указывается место, в которое ведёт данная кнопка. Ну и наконец — самое главное, то для чего кнопка собственно и нужна. Как сделать кнопку ссылкой. Для этого к тегу button применяется специальный атрибут onclick . В значении этого атрибута указывается адрес, по которому и будет осуществлён переход. К примеру так: onclick="location.href=’https://starper55plys.ru/’;" . И полный код кнопки будет выглядеть так: Теперь можно этой кнопкой перенаправлять посетителя на другую страницу сайта, или на другой сайт. А можно сделать постраничную навигацию. Для этого код нескольких кнопок с разными адресами, заключается в один блочный тег, и получается вот такое меню. Все кнопки действующие, можно попробовать как они работают. Кнопки с различными эффектами при наведении и нажатии, смотрите в статье Кнопки CSS с оригинальными эффектами. Желаю творческих успехов. Настоящий еврей зарабатывает тысячу долларов в месяц, две тысячи отдает жене, а на оставшиеся три живет сам.

     

    Предыдущая страница   Следущая страница




Рейтинг@Mail.ru