Как центрировать эту кнопку без добавления дополнительных оберток? [закрыто] ⇐ CSS

[Гость]

Вот мой HTML:

Код: Выделить всё

[url=#bottomPage]Go to Bottom ->[/url]
[url=order.html]Order Coffee Now![/url]
[url=#title]Back to Top ^[/url]

Here is my CSS:

Код: Выделить всё

a {
background-color : #483c32;
border-radius    : 5px;
color            : white;
font-size        : 15px;
position         : relative;
cursor           : pointer;
padding          : 5px 5px;
position         : relative;
}
a:hover {
background : rgba(72, 60, 50, 0.8);
transition : 0.5s;
}
button {
border          : none;
background      : none;
cursor          : pointer;
padding-bottom  : 15px;
text-decoration : none;
position        : relative;
}

This is how it looks like
Go to bottom button:

,
Order coffee button:

,
Back to top button:

I tried doing this

Код: Выделить всё

button{
border           : none;
background       : none;
cursor           : pointer;
padding-bottom   : 15px;
text-decoration  : none;
position         : relative;
background-color : #483c32;
border-radius    : 5px;
color            : white;
font-size        : 15px;
position         : relative;
cursor           : pointer;
padding          : 5px 5px;
position         : relative;
display          : none;
margin           : 0 auto;
}

However the output I am getting is this:

As you can see, the CSS of the a element tag still remains. I want to center the button without creating any wrappers (I am restricted from tampering with the HTML files lol) and without inheriting the design of the a element tag.


Источник: https://stackoverflow.com/questions/781 ... l-wrappers