CSSとHTML5で作る簡単ダウンロードボタン

プラグインDownload Monitorのダウンロードボタンは機能的ですが、ちょっとダサいので・・

 

CSSを指定してシンプルにしました。

kaoleft
もちろん普通のダウンロードボタンとしても使えます

 

スタイルシート (style.css)に次のCSSコードをコピペします(WordPressの場合は子テーマ)。

/* ダウンロードボタン */
.button{
display:block;
width: 300px;
height:70px;
line-height: 70px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
background-color: #999999;
border-radius: 5px;
transition: all 0.5s 0s ease;
}
.button:hover{
color: #f27e57; 
background-color: #FFDDAA;
}

 

記事には下記のHTMLをコピペ。download属性にはダウンロード時のファイル名を指定できます。

<div align="center">
<a class="button" href="URL" download="">ダウンロードはこちら</a>
</div>

 

transitionプロパティを使っているのでhoverだけの時よりも滑らかな感じ。

transition: all 0.5s 0s ease;

 

プラグインDownload Monitorで指定する場合は、URLの欄にこのように記述します。

https://ドメイン/download/ID/

 

◇HTML&CSS







サイト運営
わたしらしく