CSS anchor and button stylized the same, but different sizes-CodePudding

I want to style the anchor and the buttons the same way, but they are rendering with different sizes, I would appreciate some help! This is my code

.button-delete {
  background: rgb(253, 75, 75);
  border: 2px solid #000;
  border-radius: 0px;
  text-decoration: none;
  padding: 9px 16px;
  font-size: 13px;
  line-height: 25px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 3px;
  color: #000;
  transition: .3s ease-in-out;  
}

.button-read {
  background: rgb(122, 122, 122);
  border: 2px solid #000;
  border-radius: 0px;
  text-decoration: none;
  padding: 9px 16px;
  margin: 30px auto;
  font-size: 13px;
  line-height: 25px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 3px;
  color: #EEEEEE;
  transition: .3s ease-in-out;  
}

<button >button delete</button>
<a >button read</a>

CodePudding user response：

An anchor element is display: inline by default, and button element is display: inline-block by default.

To have an anchor element and a button element respect the same sizing(padding): Set the anchor element to display: inline-block;

CodePudding user response：

You didn't define a width, so the width by default adjusts to the content (text). As soon as you do, they have the same size:

.button-delete {
  background: rgb(253, 75, 75);
  border: 2px solid #000;
  border-radius: 0px;
  text-decoration: none;
  padding: 9px 16px;
  font-size: 13px;
  line-height: 25px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 3px;
  color: #000;
  transition: .3s ease-in-out;  
  width: 200px;
}

.button-read {
  background: rgb(122, 122, 122);
  border: 2px solid #000;
  border-radius: 0px;
  text-decoration: none;
  padding: 9px 16px;
  margin: 30px auto;
  font-size: 13px;
  line-height: 25px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 3px;
  color: #EEEEEE;
  transition: .3s ease-in-out;  
  width: 200px;
}

<button >button delete</button>
<button >button read</button>