<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

<style>

.button {

  position: relative;

  top: -6px;

  left: 0px;

font-size: 11pt;

  background-color: #fff;

  border-radius: 8px;

  color: black;

  -webkit-transition: none;

  transition: none;

  box-shadow: 0 4px 0 #003B55;

  text-shadow: 0 2px 2px rgba(0, 0, 0, .3);

  text-decoration: none;

  padding: 5px 6px;

  margin: 2px;

}

.button:hover {

  background-color: #ccc;

}

.button:active {

  background-color: #ccc;

  top: -5px;

  box-shadow: 0px 3px 0px 0px #1C5471 inset;

}

.icon {

  font-family: "Material Icons Outlined";

  font-size: 14pt;

  position:relative;

  top:4px;

  margin:0 3px 0 3px;

}

</style>

<a class="button" href="https://sites.google.com/view/pon250/home"><span class="icon">home</span></a>

<a class="button" href="https://sites.google.com/view/pon250/embed_googlephotos"><span class="icon">video_file</span>動画埋込</a>

<a class="button" href="https://sites.google.com/view/pon250/page2"><span class="icon">note_alt</span>Page2</a>