Домой / Сайтостроение / Как в html сделать кнопку?

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

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

Как в html сделать кнопку для сайта или блога?

Здравствуйте, уважаемые друзья и гости блога! Рад Вас снова приветствовать у себя на pribylwm.ru!!!


Сейчас я вам расскажу очень интересную вещь, которая я думаю многим пригодится в создании и оформлении своего ресурса. Это, как в html сделать кнопку.

Да, простая кнопка в html. Но бывают моменты, когда вам просто необходимо создать красивую кнопку в html для своего сайта.

Я думаю, что статья получится не очень длинная, но информативная и полезная для тех, кому это нужно!

И так, приступим ...

Узнай здесь! Как в html сделать кнопку на свой сайт!

Это не сложно, даже можно сказать, что очень просто!

Сейчас я вам дам несколько вариантов уже готовых примеров кнопки в html, которые Вы сможете редактировать под свои нужды.

То есть Вы сможете изменить текст кнопки html на свой, поставить любую свою ссылку на кнопку, чтобы при нажатии Вы смогли перейти туда, куда вам нужно, а размер кнопки в html будет изменяться автоматически от длинны вашего текста расположенного в ней.

Вот такая вот универсальная и красивая кнопка в html у Вас получится:

красивая кнопка в html
красивая кнопка в html

Для того, чтобы получилась такая красивая кнопка в html, вам нужно:

Скачать стили или сделать файл с расширением CSS и поместить туда код который я вам предоставлю ниже. Для того, чтобы кнопка отображалась на вашем сайте в таком виде, который Вы видели выше на картинке.

Вот ссылка для скачивания готового файла стилей <<< как в html сделать кнопку >>>. Его Вы должны поместить в активную тему своего сайта. Просто закачать и все!

А вот сам код стилей CSS для «как в html сделать кнопку»:

html,
body {
  margin: 0;padding: 0;
}

.buttons {width: 800px; height: auto; margin: 50px;
}

.valery_button {
  display: inline-block;
  overflow: hidden;
  padding: 10px 30px;
  margin: 20px;
  text-align: center;
  font-size: 14pt;
  font-family: arial;
}

.button_1 {
  color: #111;
    text-decoration: none; /* Убираем подчеркивание ссылки */
    background: #fd970b; /* Цвет фона кнопки по умолчанию */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb319', endColorstr='#ff8000'); /* Градиент кнопки */
    background: -webkit-gradient(linear, left top, left bottom, from(#fbb319), to(#ff8000)); /* Градиент кнопки */
    background: -moz-linear-gradient(top,  #fbb319,  #ff8000); /* Градиент кнопки */
    background: gradient(linear, top,  #fbb319,  #ff8000); /* Градиент кнопки */
    border: 1px solid #ff8000; /* Обводка кнопки */
}

.button_2 {
  color: #fff;
    text-decoration: none; /* Убираем подчеркивание ссылки */
    background: #0bba0c; /* Цвет фона кнопки по умолчанию */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#13d10f', endColorstr='#02a009'); /* Градиент кнопки */
    background: -webkit-gradient(linear, left top, left bottom, from(#13d10f), to(#02a009)); /* Градиент кнопки */
    background: -moz-linear-gradient(top,  #13d10f,  #02a009); /* Градиент кнопки */
    background: gradient(linear, top,  #13d10f,  #02a009); /* Градиент кнопки */
    border: 1px solid #028c1f; /* Обводка кнопки */
}

.button_3 {
  color: #a7e0ff;
    text-decoration: none; /* Убираем подчеркивание ссылки */
    background: #0973bb; /* Цвет фона кнопки по умолчанию */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f97d0', endColorstr='#0454a8'); /* Градиент кнопки */
    background: -webkit-gradient(linear, left top, left bottom, from(#0f97d0), to(#0454a8)); /* Градиент кнопки */
    background: -moz-linear-gradient(top,  #0f97d0,  #0454a8); /* Градиент кнопки */
    background: gradient(linear, top,  #0f97d0,  #0454a8); /* Градиент кнопки */
    border: 1px solid #0454a8; /* Обводка кнопки */
}

.button_b {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  khtml-border-radius: 4px;
}
.button_v {
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  khtml-border-radius: 20px;
}

Его Вы должны поместить в уже созданный файл с расширением CSS на своем хостинге в папке с активной темой.

Выбирайте сами, что вам удобнее, скачать уже готовый файл стилей или сделать его самому, поместив туда код стилей CSS?

Красивая кнопка в html — установка на сайт!

Теперь нужно установить нашу кнопку в html на наш сайт. Как это сделать? Проще простого!

Вот я вам предлагаю уже готовые коды самих кнопок на ваш выбор:

<a class="button_a button_1 valery_button" href="/">КРАСИВАЯ КНОПКА №1</a>

<a class="button_b button_1 valery_button" href="/">КРАСИВАЯ КНОПКА №2</a>

<a class="button_v button_1 valery_button" href="/">КРАСИВАЯ КНОПКА №3</a>

<a class="button_a button_2 valery_button" href="/">КРАСИВАЯ КНОПКА №4</a>

<a class="button_b button_2 valery_button" href="/">КРАСИВАЯ КНОПКА №5</a>

<a class="button_v button_2 valery_button" href="/">КРАСИВАЯ КНОПКА №6</a>

<a class="button_a button_3 valery_button" href="/">КРАСИВАЯ КНОПКА №7</a>

<a class="button_b button_3 valery_button" href="/">КРАСИВАЯ КНОПКА №8</a>
<a class="button_v button_3 valery_button" href="/">КРАСИВАЯ КНОПКА №9</a>

Вам нужно просто скопировать понравившийся, Вы уже видели на картинке выше примеры этих кнопок, они здесь расположены в том же порядке, как и на картинке выше!

Затем изменить ваш текст самой кнопки, я думаю Вы догадаетесь, где это сделать? И можете вставить свою ссылку для кнопки, по которой будет осуществляться целевой переход с этой кнопки.

Вот и все дела!

Да, совсем забыл! Вот здесь Вы сможете узнать о том:

  1. Как сделать красивые кнопки для сайта на WordPress при помощи плагина MaxButtons
  2. Как создать кнопку для сайта с помощью генератора кнопок на CSS3
  3. А это сам онлайн генератор кнопок CSS
  4. А это второй генератор кнопок для сайта

Если вам понравилась статья? Поделитесь ею со своими друзьями и знакомыми в соцсетях нажав на кнопочки ниже!

А если хотите быть всегда в курсе всех новых событий на моем блоге, то подпишитесь на его обновления!

Спасибо за внимание!

Всегда ваш Валерий Бородин



Про Валерий Бородин

Проверьте также

анимация svg

Анимация SVG или как создать SVG слайдер на сайт?

Анимация SVG в создании слайдера для сайта — Пример рабочего SVG слайдера изображений! Здравствуйте, уважаемые друзья и гости …

  • http://nlitvishko.ru/ Наталья

    Для меня коды — пока закрытая область. Нужно многому учиться. А Вы, Валерий, молодец! Знаете сами и учите других.

    • https://pribylwm.ru/ Валерий Бородин

      Спасибо Наталья за похвалу! Стараюсь быть полезным для других!

  • http://sovety-lecheniya.ru людмилла

    Здравсвуйте Валерий! какая интересная статья, но мне разобратся в этом сложно. Наверное потому что есть надежный тыл, который всю техническую работу делет за меня. Мой сынок, у него и образование соответственное. Так что жду его до вечера и мы вместе снова зайдем к вам в гости.

    • https://pribylwm.ru/ Валерий Бородин

      Спасибо Людмила! Жду Вас в гости!!!

  • http://taiafilippova.ru/ Таисия

    Валерий, для меня это так сложно, я ведь в этих кодах ничего не понимаю, а иногда так надо поставить такую кнопку. А проще это как-то можно сделать? Наверное, придется за надобностью к вам обращаться. Поможете?

    • https://pribylwm.ru/ Валерий Бородин

      Всегда помогу!

  • http://dolinacoda.ru/ Миша

    Градиенты конечно сильно придают красоты кнопкам, еще 3-5 лет назад в css их не было

    • https://pribylwm.ru/ Валерий Бородин

      Хорошо, что они теперь есть!

  • http://zdrawibudem.ru Сергей

    Хорошо написано, для новичков все, по-моему, очень доступно и просто изложено.Бери и делай!

  • https://pribylwm.ru/dlya-sajta/kak-sdelat-tablicu-v-wordpress.html Дмитрий

    Спасибо огромное. Искал как сделать кнопку в HTML, думал что придется повозится, а в итоге нашел всё готовое! Да плюс еще увидел статью про MaxButtons! Это я удачно зашел 😛

    • https://pribylwm.ru/ Валерий Бородин

      Спасибо, что зашли Дмитрий! Жду Вас еще в гости к себе!!!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу