The transition effect on div:after does not function properly in Safari. Below is the code for reference:
HTML:
.bbtn {
width: 151px;
height: 48px;
background: #ef2e41;
margin: auto;
margin-top: 32px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: relative;
border: 2px solid #5f121a;
}
.bbtn input {
font-size: 25px;
text-transform: uppercase;
text-align: center;
color: #fff;
background: none;
border: 0;
width: 100%;
padding: 6px 0;
position: relative;
z-index: 10;
}
.bbtn:hover {
border: 2px solid #373737;
}
.bbtn::after,
.bbtn::before {
content: "";
position: absolute;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
width: 0%;
height: 100%;
top: 0;
left: 0;
background: #202020;
}
.bbtn:hover::after {
width: 100%;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}<div class="bbtn">
<input name="" type="submit" value="search">
</div>For a working example, please visit my code snippet.