В интернете очень много примеров уже оформленных кнопок. Вот первый, из понравившихся мне:

https://html5book.ru/krasivye-knopki-dlya-sayta/ - тут код

https://html5book.ru/examples/styling-buttons/demo... - тут можно потыкать потестить

Все запомнить невозможно. Да и не нужно.
Старайтесь запоминать логику.

• Поймите в чем разница между блочным элементом и строчным.
  
• Разберитесь хорошенько в display и position.
  
• Разберитесь как работает float
  
• Попробуйте самостоятельно выровнять один div внутри другого по левому краю / центру / правому краю.
  
• Выровняйте строчный элемент (например ) внутри блочного по вертикали и по горизонтали по центру / слева / справа / сверху / снизу.
  

Если все вышеперечисленное вы сделаете, считайте, что базу вы уже поняли.

Перерыла весь интернет. Никакое из предложенных решений не помогает. Но как только указываю

button {
   position: absolute;
}

рамка волшебным образом исчезает и все встает на свои места.

Вариант для тех, кому не подошло ни одно из предложенных решений