Как оформить кнопки с помощью CSS

Кнопки с оформлениями помогают создавать красивые и интересные веб-страницы. Есть множество стилей, которые можете применить к кнопкам. Смотрите инструкцию.

1. Создайте <button>

Прежде всего создайте элемент <button>.

<button type="button">Submit</button>
Многие разработчики также используют теги <a>, <input>, <span> или <div>.

2. Оформите кнопку. Сейчас можете применить стили к вашим кнопкам с помощью класса.

button {
display: inline-block;
background-color: #7b38d8;
border-radius: 10px;
border: 4px double #cccccc;
color: #eeeeee;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

3.Оформите выделенное состояние (hover state).

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

button:hover {
background-color: green;
}

А сейчас рассмотрим интересный пример, где использован элемент <button>:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      button {
      display: inline-block;
      background-color: #7b38d8;
      border-radius: 10px;
      border: 4px double #cccccc;
      color: #eeeeee;
      text-align: center;
      font-size: 28px;
      padding: 20px;
      width: 200px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
      }
      button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
      }
      button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
      }
      button:hover {
      background-color: #f7c2f9;
      }
      button:hover span {
      padding-right: 25px;
      }
      button:hover span:after {
      opacity: 1;
      right: 0;
      }
    </style>
  </head>
  <body>
    <h2>Style buttons</h2>
    <button>
    <span>Submit</span>
    </button>
  </body>
</html>

Давайте рассмотрим и другие примеры оформленных кнопок:

В следующем примере использован элемент <span>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #560059;
      color:#eeeeee;
      font-family:Arial;
      font-size:16px;
      }
      .wrapper {
      margin: 80px auto;
      text-align: center;
      width: 100%;
      position: relative;
      }
      .button {
      padding: 15px 100px;
      margin:10px 4px;
      color: #eee;
      font-family: sans-serif;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      text-decoration: none;
      display:inline-block;
      border:1px solid ;
      }
      .button::before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: -1;
      -webkit-transform: scaleY(.1);
      transform: scaleY(.1);
      transition: all .4s
      }
      .button:hover{
      color:#b414ba;  
      }
      .button:hover::before{
      opacity: 1;
      background-color: #f7c2f9;
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
      transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s;
      transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity
      }
    </style>
  </head>
  <body>
    <div class="wrapper">   
      <span class="button">Button 1</span>
      <span class="button">Button 2</span>
    </div>
  </body>
</html>

Здесь использован элемент <a>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: #3b0044;
      color:#6098FF;
      font-family:sans-serif;
      font-size:16px;
      }
      .wrapper {
      margin: 80px auto;
      text-align: center;
      width: 100%;
      position: relative;
      }
      .button {
      padding: 15px 100px;
      margin:10px 4px;
      color: #ffffff;
      font-family: sans-serif;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      text-decoration: none;
      display:inline-block;
      }
      .button{
      border:1px solid transparent; 
      -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);
      transition: all 0.4s cubic-bezier(.5, .24, 0, 1);
      }
      .button::before {
      content: '';
      position: absolute;
      left: 0px;
      bottom:0px;
      z-index:-1;
      width: 0%;
      height:1px;
      background: #003177;
      box-shadow: inset 0px 0px 0px #b6cdef;
      display: block;
      -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);
      transition: all 0.4s cubic-bezier(.5, .24, 0, 1)
      }
      .button:hover::before {
      width:100%;
      }
      .button::after {
      content: '';
      position: absolute;
      right: 0px;
      top:0px;
      z-index:-1;
      width: 0%;
      height:1px;
      background: #a9c1e8;
      -webkit-transition: all 0.4s cubic-bezier(.7, .25, 0, 1);
      transition: all 0.4s cubic-bezier(.7, .25, 0,1)
      }
      .button:hover::after {
      width:100%;
      }
      .button:hover{
      border-left:1px solid #b6cdef;
      border-right:1px solid #6098FF;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <a href="#" class="button">Button 1</a>
      <a href="#" class="button">Button 2</a>
    </div>
  </body>
</html>

В следующем примере мы использовали элемент <button>:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container {
      position: absolute;
      top: 10%;
      }
      .button {
      border: none;
      display: block;
      text-align: center;
      cursor: pointer;
      text-transform: uppercase;
      outline: none;
      overflow: hidden;
      position: relative;
      color: #eeeeee;
      font-weight: 600;
      font-size: 15px;
      background-color: #153f00;
      padding: 15px 50px;
      margin: 0 auto;
      }
      .button span {
      position: relative; 
      z-index: 1;
      }
      .button:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 470%;
      width: 140%;
      background: #52b71f;
      -webkit-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg);
      transform: translateX(-100%) translateY(-25%) rotate(45deg);
      }
      .button:hover:after {
      -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
      transform: translateX(-9%) translateY(-25%) rotate(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Style button</h2>
    <div class="container">	
      <button type="button" class="button">
      <span>Hover!</span>
      </button>
    </div>
  </body>
</html>

Еще один пример с элементом <button>:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      font-size: 60%;
      background: #00abb7;
      }
      .container {
      padding: 50px;
      }
      button,
      button::after {
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      }
      button {
      background: none;
      border: 4px solid #fff;
      border-radius: 10px;
      color: #fff;
      display: block;
      font-size: 1.6em;
      font-weight: bold;
      margin: 10px auto;
      padding: 2em 6em;
      position: relative;
      text-transform: uppercase;
      }
      button::before,
      button::after {
      background: #fff;
      content: '';
      position: absolute;
      z-index: -1;
      }
      button:hover {
      color: #29f2e4;
      }
      .button1::after {
      height: 0;
      left: 0;
      top: 0;
      width: 100%;
      }
      .button1:hover:after {
      height: 100%;
      }
      .button2::after {
      height: 100%;
      left: 0;
      top: 0;
      width: 0;
      }
      .button2:hover:after {
      width: 100%;
      }
      .button3::after {
      height: 0;
      left: 50%;
      top: 50%;
      width: 0;
      }
      .button3:hover:after {
      height: 100%;
      left: 0;
      top: 0;
      width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <button type="button" class="button1">Button 1</button>
      <button type="button" class="button2">Button 2</button>
      <button type="button" class="button3">Button 3</button>
    </div>
  </body>
</html>

В следующем примере использован элемент <input>:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      input {
      padding: 15px 100px;
      margin:10px 4px;
      cursor: pointer;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      }
      input:hover {
      opacity:0.5;}
    </style>
  </head>
  <body>
    <input type="button" value="Button"/>
  </body>
</html>