<button class="btn btn--ios btn--radius">
  
    <svg class="btn__logo" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="708.662px" height="708.662px" viewBox="0 0 708.662 708.662" enable-background="new 0 0 708.662 708.662"
	 xml:space="preserve">
<g>
	<g id="g25472" transform="translate(19.48863,19.49672)">
		<path id="path190" fill="#FFFFFF" d="M438.59,109.303c23.751-28.768,39.785-68.768,35.368-108.638
			c-34.215,1.373-75.627,22.809-100.193,51.576c-21.991,25.425-41.286,66.153-36.058,105.21
			C375.867,160.409,414.836,138.027,438.59,109.303"/>
	</g>
	<g id="g186" transform="matrix(54.85033,0,0,-54.85033,-1411.313,6454.729)">
		<path id="path188" fill="#FFFFFF" d="M35.575,110.939c-0.014,1.57,1.282,2.323,1.34,2.36c-0.729,1.067-1.864,1.213-2.269,1.23
			c-0.965,0.098-1.884-0.568-2.374-0.568c-0.489,0-1.246,0.554-2.046,0.539c-1.054-0.016-2.024-0.612-2.566-1.555
			c-1.094-1.897-0.279-4.709,0.786-6.248c0.521-0.753,1.142-1.601,1.958-1.57c0.786,0.031,1.083,0.508,2.032,0.508
			c0.949,0,1.216-0.508,2.047-0.493c0.845,0.016,1.381,0.769,1.899,1.524c0.597,0.874,0.844,1.72,0.858,1.764
			C37.221,108.438,35.592,109.063,35.575,110.939"/>
	</g>
</g>
</svg>
  <div class="btn__content btn__content--big">Download</div>
  <div class="btn__content">on the App Store</div>
</button>

<button class="btn btn--android btn--radius">
  <svg class="btn__logo" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="708.662px" height="708.662px" viewBox="0 0 708.662 708.662" enable-background="new 0 0 708.662 708.662"
	 xml:space="preserve">
<path id="c" fill="#FFFFFF" d="M607.229,229.405L607.229,229.405c-26.838,0-48.596,21.756-48.596,48.594v172.106
	c0,26.838,21.758,48.594,48.596,48.594l0,0c26.839,0,48.595-21.756,48.595-48.594V277.997
	C655.823,251.159,634.067,229.405,607.229,229.405z"/>
<path fill="#FFFFFF" d="M538.536,220.405c0-62.651-36.705-117.381-91.341-146.892l27.939-50.406
	c3.523-6.357,1.228-14.368-5.131-17.893c-6.357-3.523-14.367-1.228-17.891,5.131l-28.973,52.267
	c-21.274-7.918-44.514-12.287-68.859-12.287c-27.511,0-53.606,5.574-77.05,15.552l-30.781-55.53
	c-3.524-6.357-11.534-8.654-17.892-5.131c-6.357,3.523-8.654,11.534-5.13,17.893l30.344,54.741
	c-50.414,30.348-83.744,82.855-83.744,142.557L538.536,220.405L538.536,220.405z M264.242,148.322
	c-6.039,0-10.933-4.895-10.933-10.933s4.895-10.935,10.933-10.935c6.038,0,10.933,4.896,10.933,10.935
	S270.28,148.322,264.242,148.322z M434.322,148.322c-6.039,0-10.933-4.895-10.933-10.933c0-6.037,4.894-10.935,10.933-10.935
	s10.932,4.896,10.932,10.935C445.253,143.427,440.361,148.322,434.322,148.322z"/>
<path fill="#FFFFFF" d="M170.241,240.093v269.753c0,24.602,19.943,44.545,44.545,44.545h17.06v92.115
	c0,26.838,21.756,48.594,48.594,48.594s48.594-21.756,48.594-48.594v-92.115h40.496v92.115c0,26.838,21.756,48.594,48.594,48.594
	s48.594-21.756,48.594-48.594v-92.115h27.486c24.602,0,44.545-19.943,44.545-44.545V240.093H170.241z"/>
<path id="c_2_" fill="#FFFFFF" d="M101.435,229.405L101.435,229.405c-26.838,0-48.596,21.756-48.596,48.594v172.106
	c0,26.838,21.758,48.594,48.596,48.594l0,0c26.838,0,48.594-21.756,48.594-48.594V277.997
	C150.028,251.159,128.272,229.405,101.435,229.405z"/>
</svg>

  <div class="btn__content btn__content--big">Download</div>
  <div class="btn__content">on Google Play</div>
</button>
$bg-color-android: #a2c437;
$bg-color-ios: #3b5a9b;
$font-color: #fff;
//***Block********************
.btn{
  width:200px;
  height:60px;
  border:none;
  background-color:#ddd;
  outline:none;
  cursor:pointer;
  transition:background-color 0.2s;
}
//***Elements********************
.btn__logo{
  width:30px;
  height:30px;
  float:left;
  margin: 10px 0 14px 20px;
  position:relative;
}

.btn__content{
  width: 110px;
  height:28px;
  font-size:12px;
  float:right;
  margin-right:15px;
  text-align:left;
  
  & + &{
    margin-top:2px;
  }
}

//***Modifier********************
.btn__content--big{
  height:22px;
  font-size:22px;
  margin-top:8px;
}

.btn--ios{
  background-color:$bg-color-ios;
  color:$font-color;
  
  &:hover{
    background: darken($bg-color-ios, 8);
  }
  
}

.btn--android{
  background-color:$bg-color-android;
  color:$font-color;
  
   &:hover{
    background: darken($bg-color-android, 8);
  }
  
}

.btn--radius{
  border-radius:30px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.