页面底部按钮的位置

Question

我在页面底部放置了两个按钮，这是我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=34662194474." class="boton1cn" target="_blank">
<i class="fa fa-whatsapp my-float"> Contáctanos por Whatsapp</i>
</a>
<a href="tel:985216689" class="boton2cn" target="_blank">
<i class="fa fa-phone my-float"> ¡Llámanos!</i>
</a>

现在两个按钮位于同一位置，我需要将一个按钮固定在左侧的50％上，将另一个按钮固定在右侧的50％上，如何在CSS中做到这一点？

.boton1cn{
    position:fixed;
    width:50%;
    height:40px;
    bottom:0px;
    right:0px;
    background-color:#4762a8;
    color:#FFF;
    text-align:center;
  font-size:20px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.boton2cn{
    position:fixed;
    width:50%;
    height:40px;
    bottom:0px;
    right:0px;
    background-color:#4762a8;
    color:#FFF;
    text-align:center;
  font-size:20px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
    margin-top:16px;
}

谢谢