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

Здравствуйте, уважаемые друзья и гости блога! Рад Вас снова приветствовать у себя на atready.ru!!! Сейчас я вам расскажу очень интересную вещь, которая я думаю многим пригодится в создании и оформлении своего ресурса. Это, как в 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. А это второй генератор кнопок для сайта

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

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

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

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