1. ホーム
  2. html

[解決済み] 透明なHTMLボタンを作るには?

2022-02-14 15:12:20

質問

Dreamweaverでホームページを作っているのですが、Photoshopで背景だけ作ろうかと思いました。そうしようと思ったのは、万が一、コードを編集するだけで簡単にボタン名を変更したい場合、コードを参照すれば良いからです。Photoshopでボタンを作ると、ボタンや要素のTextsを簡単に編集することができません。

そこで質問なのですが、シンプルなインラインスタイルのボタンを作成し、ボタンの値を表示したまま透明にするにはどうすればよいのでしょうか?

.button {     
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;        
}

クリックした後もボーダーの影が残ります。

解決方法は?

クリックしたときのアウトラインをなくすために outline:none

JSFiddleの例

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}
<button>button</button>