Why is my button style changing when on laptop and mobile

Question

I cant figure out why my button style would change when its on a laptop running safari compared to a phone in this case an iPhone running safari.

HTML code :

<div id="img_container">
<img src="../assets/images/hotdrinks.png" style="hight:50%;">
<button class="button" onClick="parent.location='hotdrinks.html'"> Hot Drinks Menu </button> 
</div>

<div id="img_container">
<img src="../assets/images/craftbeer.png" style="hight:50%;">
<button class="button" > Craft Club </button>
</div>

CSS Code:

#img_container {
position:relative;
display:inline-block;
text-align:center;
}

.button {
position:absolute;
bottom:10px;
right:10px;
width:200px;
height:50px;
font-family: test;  
color: #000000;
text-transform: uppercase;
font-size: 40px;
}

Laptop:

Phone:

Since you are not changing the default look of the button, it will look different depending on the browser you are using. — Tamás Sengel, Jul 27 '17 at 11:18
To avoid this problem with future elements and browsers, use something like Normalize.css (https://necolas.github.io/normalize.css/) — Ryan Casas, Jul 27 '17 at 12:07
I had a similar issue using bootstrap and defined a button a as follows: `press link`. Removing `type="button"` solved it ... — Bruno Vermeulen, Nov 25 '20 at 10:51

score 5 · Accepted Answer · answered Jul 27 '17 at 11:23

5

Safari on the iphone and ipad applies some default rendering on buttons.

Try, -webkit-appearance: none;

Why is my button style changing when on laptop and mobile

2 Answers2

Linked