Веб-мастерская Ларисы ВоронинойКнопка CSS. Как сверстать кнопку с градиентом с помощью HTML и CSS.
WEB-мастерская Ларисы Ворониной logo

Кнопка CSS. Как сверстать кнопку с градиентом с помощью HTML и CSS. Окт 3 2016


В этой статье я покажу вам как сверстать кнопку с помощью HTML и CSS,  дизайн которой мы нарисовали в предыдущей статье.

Выглядит дизайн нашей кнопки CSS  вот так:

knopka s gradientom

Заходим в редактор Notepad++.

Открываем новый файл: Файл -> Новый, или CTRL+N.

На верхней панели нажимаем вкладку «синтаксис» и выбираем HTML. Это означает, что наш документ будет написан на языке HTML.

knopka s gradientom

Сохраняем документ под названием index.html.

Если мы откроем этот документ в браузере, то он будет пустым, так как мы ещё ничего не написали.

Идём дальше. Пишем в нашем документе самую простую разметку:

<!DOCTYPE html>
<html>
     <head>
         <meta charset= "utf-8">
         <title>Кнопка CSS</title>
     </head>
     <body>
         Здесь будет наша кнопка CSS
     </body>
</html>

В браузере мы увидим только текст «Здесь будет наша кнопка CSS».

А теперь между тегами body (вместо слов  «Здесь будет наша кнопка») пишем самую простую разметку нашей кнопки:

<form>
     <button>Кнопка</button>
</form>

В браузере мы увидим вот это:

knopka s gradientom

Но нас это естественно не устраивает, поэтому создаём файл стилей, в котором мы будем описывать цвет фона, размеры кнопки, градиент, обводку, тени и т.д.

В Notepad++ создаём новый файл, определяем ему синтаксис CSS и сохраняем под названием style.css.

Сам по себе файл style.css работать не будет, мы должны его подключить к файлу index.html, делается это следующим образом:

В файле index.html между тегами <head></head>  в любое место вставляем вот эту строку:

<link rel= "stylesheet" type= "text/css" href= "style.css" />

На данном этапе наш index.html будет выглядеть вот так:

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <link rel= "stylesheet" type= "text/css" href= "style.css" />
          <title>Кнопка CSS</title>
     </head>
     <body>
          <form>
               <button>Кнопка</button>
          </form>
     </body>
</html>

Отлично! Поехали дальше…

Пишем стили для кнопки.

Если вы делали дизайн кнопки с градиентом вместе со мной, то открывайте ваш файл дизайна в Photoshop.

Начнём с определения общего фона.

В Photoshop берём инструмент пипетка и щёлкаем по цвету общего фона мышкой.

knopka s gradientom

Потом открываем палитру цветов и смотрим код цвета. Копируем его.

knopka s gradientom

В файле style.css прописываем стиль общего фона, после знака # вставляем код цвета, который мы скопировали.

body {
background: #2953c6;
}

Далее задаём размеры нашей кнопке:

width: 300px;
height: 100px;

И цвет, т.е. градиент:

background: linear-gradient(to top,#001861,#6899FF);

Затем описываем стили границ кнопки.

border: 1px solid rgba(208,202,201,0.1);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Делаем тень для кнопки:

box-shadow: 3px 3px 5px rgba(10,19,44,0.7);

И прописываем стили текста:

color: #fff;
font:normal 30px Verdana;
text-shadow:2px 2px 2px #000;

У нас получилась очень симпатичная кнопка CSS, точь-в-точь как на картинке.

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

button:hover{
background: linear-gradient(to top,#6899FF,#001861);
font:normal 36px Verdana;
}

В итоге у вас должен получиться вот такой файл style.css

/*Определяем стили для общего фона*/
body {
        background: #2953c6;
}
/*Определяем стили для кнопки*/
button {
/*Задаём ширину и высоту кнопки*/
        width: 300px;
        height: 100px;/*Задаём фон самой кнопки, т.е. градиент*/
        background: linear-gradient(to top,#001861,#6899FF);
/*Описываем стили границ кнопки*/
        border: 1px solid rgba(208,202,201,0.1);
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
/*Тень*/
        box-shadow: 3px 3px 5px rgba(10,19,44,0.7);/*Стили текста*/
        color: #fff;
        font:normal 30px Verdana;
        text-shadow:2px 2px 2px #000;
}/*При наведении курсора мышки меняется градиент и размер текста*/
button:hover{
        background: linear-gradient(to top,#6899FF,#001861);
        font:normal 36px Verdana;
}

Ну вот и всё! Кнопка CSS готова!


Рейтинг@Mail.ru