Кнопка css

Автор: | 21 февраля, 2018

В этой заметке мы создадим красивую кнопку, которая будет при наведении менять свой цвет.

Выглядеть это будет так:

Кнопка

А вот короткий код, который создаёт эту кнопку

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Кнопка CSS</title>
<style>
.button {
   border-top: 1px solid #f79a86;
   background: #ffb882;
   background: -webkit-gradient(linear, left top, left bottom, from(#d90707), to(#ffb882));
   background: -webkit-linear-gradient(top, #d90707, #ffb882);
   background: -moz-linear-gradient(top, #d90707, #ffb882);
   background: -ms-linear-gradient(top, #d90707, #ffb882);
   background: -o-linear-gradient(top, #d90707, #ffb882);
   padding: 20px 40px;
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 24px;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #ff0000;
   background: #ff0000;
   color: #ffffff;
   }
.button:active {
   border-top-color: #ffffff;
   background: #ffffff;
   }
</style>
</head>
<body>
<p class="button" style="width:80px;">Кнопка
</body>
</html>

Скопируйте себе в любой текстовый файл, переименуйте его в file.html и запустите. Собственно, всё. Меняя буквы и цифры, которые расположены после двоеточий в коде (типа такого #d90707) — вы сможете менять цвета и размеры элементов этой кнопки.

Некоторые возникшие вопросы и ответы

Что значит «Скопируйте себе в любой текстовый файл, переименуйте его в file.html и запустите.» Уточните, где запустить?
После того как файл переименовали — просто тыкните по этому файлу. Это обычный html, от откроется в браузере
Что с этим файлом делать дальше? Например, в статью как вставить? Просто — весь код под текстом?
Часть кода, которая находится между вставляется в css-код страницы, на которой нужно вывести эту кнопку. А часть кода между и вставляется просто в то место, где нужна кнопка

Итак. Несколько слов о том, где и как это используется.

  1. Обычно кнопки должны сподвигнуть пользователя что-то сделать.
  2. Поэтому при нажатии на кнопку должна быть какая-то обработка действия.

Логика такая:

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

2. Потом смотрим на код этой ссылки. Код будет выглядеть примерно так:

<a href='https://aleksandr-krylov.ru'>перейти на сайт</a>

А в тексте это будет просто обычная подчёркнутая ссылка «перейти на сайт»

3. Мы же хотим, чтобы эти слова были большой красной кнопкой, поэтому в код ссылки добавляем вот это:

class="button" style="width:80px;"

Получается:

<a class="button" style="width:80px;" href='https://aleksandr-krylov.ru'>перейти на сайт</a>

То есть мы передаём браузеру инструкцию: ссылке присвоить оформление класса button и стиль с шириной 80 пикселей

4. Браузеру же нужно это изобразить. А инструкция о том, как это сделать находится в коде между строками:

<style>
Тут код
</style>

Поэтому просто копируем этот код вместе с

<style> Тут код </style>

и вставляем себе на страничку между тегами (строками)

<head> 
</head>

5. В итоге получаем

<head> 
<style>
Тут код
</style>
</head>
<body>
<a class="button" style="width:80px;" href='https://aleksandr-krylov.ru'>перейти на сайт</a>
<body>

За размеры кнопки отвечает вот эта строка в тексте страницы:

<p class="button" style="width:80px;">Кнопка.

Уменьшая значение width, вы будете уменьшать саму кнопку и текст зрительно будет всё шире и шире

Второй вариант — делать сам текст больше, тогда можно изменять параметр font-size: 24px; этот параметр меняет размер шрифта.

Если же вам хочется, чтобы всё осталось точно таким же (размер шрифта и размер кнопки), тогда нужно увеличивать расстояние (интервал) между буквами в слове.

Тогда нужно будет написать так:

<p class="button" style="width:80px; letter-spacing: 5px;">Кнопка

Именно этот параметр letter-spacing: 5px; будет отвечать за расстояние между буквами в html, и именно вот эту величину 5px нужно менять в большую или меньшую сторону.

Кнопка css: 4 комментария

  1. Олег

    Здравствуйте! Подскажите пожалуйста, как выровнять текст по ширине кнопки, представленной вами в данном материале?

    Ответить
    1. Александр Крылов Автор записи

      Олег, доброе утро. Сейчас дополню статью

      Ответить
  2. Светлана

    а вот еще такой вопрос:)))А куда эту кнопочку можно вставить у себя на сайте?:)Где она появится?

    Ответить
    1. Александр Крылов Автор записи

      Сейчас дополню заметку )

      Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *