JSFiddle - React, Tailwind, and code Playground

HTML

<!-- お茶の部分 -->
<figure>
　<img src="http://bit.ly/2fTjc31" class="coffe" target="_blank">
</figure>

<h2 class="zakkuri-blue">画像ホバーで青くなる①</h2>

<p class="btn-blue"><a href="http://example.com">ボタン青①</a></p>


<!-- コーヒーの部分 -->
<figure>
　<img src="http://bit.ly/2fgCfR6" class="coffe" target="_blank">
</figure>

<h2 class="zakkuri-blue">画像ホバーで青くなる②</h2>

<p class="btn-horizon">
　<span class="btn-yel-horizon"><a href="http://example.com">ボタン黄②</a></span>
　<span class="btn-blue-horizon"><a href="http://example.com">ボタン青②</a></span>
</p>

CSS

/*
画像ホバー時に道連れで青くなる
*/
figure:hover + .zakkuri-blue{
  background: #4285F4;
}
figure:hover ~ .btn-blue{
  background: #4285F4;
}
/*質問箇所(これも青くしたい)*/
figure:hover ~ .btn-blue-horizon{
  background: #4285F4;
}


/*
お茶の部分
*/

/*ボタン青①*/
.btn-blue a{
	color: #FFF;
  display: block;
  padding: 5px;
}
.btn-blue a:hover{
	color: #FFF;
	border-radius: 5px;
}
.btn-blue {
	margin: 10px auto 20px;
	line-height: 1.8;
  width: 80%;
	text-align: center;
	background-color: #808080;
	border-radius: 5px;
	color: #fff;
}
.btn-blue:hover {
	background-color: #4285F4;
}

/*
コーヒーの部分
*/
.btn-horizon {
  display: flex;
	margin: 10px 20px;
	justify-content: space-between;
}
/*ボタン青➁*/
.btn-blue-horizon a{
	color: #FFF;
  display: block;
  padding: 5px;
}
.btn-blue-horizon a:hover{
	color: #FFF;
	border-radius: 5px;
}
.btn-blue-horizon {
	margin: 10px;
  width: 80%;
	text-align: center;
	background-color: #808080;
	border-radius: 5px;
	color: #fff;
}
.btn-blue-horizon:hover {
	background-color: #4285F4;
}
/*ボタン黄色②*/
.btn-yel-horizon a{
	color: #FFF;
  display: block;
  padding: 5px;
}
.btn-yel-horizon  a:hover{
	color: #444;
	border-radius: 5px;
}
.btn-yel-horizon  {
	margin: 10px;
	line-height: 1.8;
  width: 80%;
	text-align: center;
	background-color: #808080;
	border-radius: 5px;
	color: #fff;
}
.btn-yel-horizon :hover {
	background-color: #f9da3e;
}