<body>
<a href="#" class="button">ボタン風リンク</a>
<a href="#" class="flat-button">フラットボタン</a>
<a href="#" class="outline-button">アウトラインボタン</a>
<a href="#" class="animated-button">アニメーションボタン</a>
<a href="#" class="button"><i class="fas fa-download"></i> ダウンロード</a>
</body>
<!-- Font AwesomeのCDNを使用 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
a.button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50; /* 背景色を緑色に */
color: white; /* 文字色を白色に */
text-align: center;
text-decoration: none;
border-radius: 5px; /* 角を丸く */
font-size: 16px;
}
a.button:hover {
background-color: #45a049; /* ホバー時に少し暗く */
}
a.flat-button {
display: inline-block;
padding: 10px 20px;
background-color: #008CBA;
color: white;
text-decoration: none;
border-radius: 0; /* 角を直角に */
font-size: 16px;
}
a.flat-button:hover {
background-color: #007BB5;
}
a.outline-button {
display: inline-block;
padding: 10px 20px;
background-color: transparent;
color: #4CAF50;
text-align: center;
text-decoration: none;
border: 2px solid #4CAF50;
border-radius: 5px;
font-size: 16px;
}
a.outline-button:hover {
background-color: #4CAF50;
color: white;
}
a.animated-button {
display: inline-block;
padding: 10px 20px;
background-color: #f44336;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
transition: background-color 1.5s ease;
}
a.animated-button:hover {
background-color: #000;
}
a.button i {
margin-right: 8px;
}
</style>