カテゴリー:
CSS
閲覧数:549 配信日:2019-10-03 08:16
<input type="submit">のデザイン案
時代に逆行しているが、グラデーションは制限を受けなかった
・Ultimate CSS Gradient Generator
一旦は採用した案
HTML
<input type="submit" name="send" value="ダウンロード" class="btn-download">
CSS
<style>
.btn-download{
margin: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
color:white;
border: solid 2px #6db3f2;
}
.btn-download:hover {
/* background: linear-gradient(to bottom, #009af9 8%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); */
background: linear-gradient(to bottom, #009af9 15%,#009af9 18%,#009af9 18%,#a9d2f3 21%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
}
.btn-download:active {
background-color: #4163A7;
box-shadow: 0 0 #3F51B5;
top: 1rem;
}
</style>
最終的に<button type="submit">へ変更
上記グラデーション案は不採用
・HTML フォームへのスタイル設定