Как поменять позицию кнопки влево?

У меня есть кнопка, и вместо того, чтобы находиться слева, она находится посередине.

Как её переместить влево?

<!DOCTYPE html>
<html>

<head>
  <title>Главная</title>
  <style>
    a.blubtn {
      width: 90px;
      text-align: center;
      display: block;
      font-family: arial;
      text-decoration: none;
      font-weight: 300;
      font-size: 14px;
      border: #1071FF 1px solid;
      color: #1071FF;
      padding: 3px;
      padding-left: 5px;
      padding-right: 5px;
      margin: 20px auto;
      transition: .5s;
      border-radius: 0px;
    }
    
    a.blubtn:hover {
      top: 5px;
      transition: .5s;
      color: #EE82EE;
      border: #EE82EE 1px solid;
      border-radius: 7px;
    }
    
    a.blubtn:active {
      color: #000;
      border: #1A1A1A 1px solid;
      transition: .07s;
      background-color: #FFF;
    }
  </style>
</head>

<body>
  <a href="UK1.html" class="blubtn">Сообщения</a>
</body>

</html>


Ответы (1 шт):

Автор решения: UModeL

<!DOCTYPE html>
<html>

<head>
  <title>Главная</title>
  <style>
    a.blubtn {
      width: 90px;
      text-align: center;
      display: block;
      font-family: arial;
      text-decoration: none;
      font-weight: 300;
      font-size: 14px;
      border: #1071FF 1px solid;
      color: #1071FF;
      padding: 3px;
      padding-left: 5px;
      padding-right: 5px;
      margin: 20px 0;
      transition: .5s;
      border-radius: 0px;
    }
    
    a.blubtn:hover {
      top: 5px;
      transition: .5s;
      color: #EE82EE;
      border: #EE82EE 1px solid;
      border-radius: 7px;
    }
    
    a.blubtn:active {
      color: #000;
      border: #1A1A1A 1px solid;
      transition: .07s;
      background-color: #FFF;
    }
  </style>
</head>

<body>
  <a href="UK1.html" class="blubtn">Сообщения</a>
</body>

</html>

→ Ссылка