I've tried different solutions for similar issues, but I'm struggling to get the text to appear properly on my custom buttons in Safari. They are displaying perfectly in Chrome and Firefox, but not on iOS devices.
Does anyone have any suggestions on how to make sure the text is on top of the background as intended?
HTML:
<a href="#" class="dark-button border">Register</a>
<a href="#" class="light-button border">Register</a>
CSS:
/* Hexagon Button Style */
.dark-button,
.light-button{
position: relative;
display: block;
background: transparent;
width: 280px;
height: 48px;
line-height: 46px;
text-align: center;
font-size: 16px;
letter-spacing: 1.8px;
text-decoration: none !important;
text-transform: uppercase;
font-weight:600;
margin: 15px auto;
font-family: Orbitron, Helvetica, sans-serif;
}
.dark-button:before,
.dark-button:after,
.light-button:before,
.light-button:after{
position: absolute;
content: '';
width: 280px;
left: 0px;
height: 24px;
z-index: -1;
}
.dark-button:before,
.light-button:before{
transform: perspective(8px) rotateX(3deg);
}
.dark-button:after,
light-button:after{
top: 24px;
transform: perspective(8px) rotateX(-3deg);
}
/* Hex Button color styles */
.dark-button{
color: #ffffff;
}
.light-button{
color: #2c2a2b;
}
.dark-button.border:before,
.dark-button.border:after {
background: #2c2a2b;
}
.light-button.border:before,
.light-button.border:after {
background: #ededed;
}
/* Hex Button hover styles */
.dark-button.border:hover:before,
.dark-button.border:hover:after,
.light-button.border:hover:before,
.light-button-border:hover-after{
background: #BDBDBD;
}
.dark-button.border:hover,
.light-button:hover{
color: #ffffff;
}