<input>タグの"submit"属性の見た目を、CSSで変更しようとしてハマる

submitボタン実装方法は2種類ある

<input type="submit">
・CSS適用が難しい
・デフォルトCSSの影響を受ける(が強い)

<button type="submit" >
・CSS適用が簡単
・通常通り(他要素と同様の取り扱い)

気が付いたこと

「<input type="submit">のCSS変更は、予想していた以上にやりづらかった
他で動作しているCSSをコピペしてみても意図した通り動作しない、など

<input type="submit" name="xxxx" value="xxxx" class="xxxx">

<button type="submit">を使用した方が良いかも
<input type="submit">と<button type="submit">の違いを知りたい

<input type="submit">は、デフォルトCSSに癖がある

<input type="submit">のデフォルトCSSを一部変更しようとしてハマる

デフォルトのグラデーション
「:hover」時にborderを設定すると、消える

デフォルトのborder
「:hover」時にborder:2pxを設定しないと、位置がズレる
・2px固定とか環境依存が怖くて指定したくない

その他解決できなかったトラブル
・文字後に三角形矢印を、コピペCSSで表示しようとするもうまくいかず

<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 フォームへのスタイル設定