Question

我需要创建一个仅显示为文本的HTML按钮。我的HTML必须使用外部CSS和JS文件完全语义化。

我一直遇到很多麻烦，因为我无法正确放置位置，也无法让按钮的背景消失。

＆＃13;

#bttnPlacement {
  text-align: center;
  color: white;
  background: transparent;
  border: none;
  outline: none;
  display: block;
  height: 100px;
  width: 300px;
  cursor: pointer;
}

myBttn {
  text-align: center;
}

＆＃13;

<div id="banner">
  <img src="/images/gameTitle.jpg" alt="Banner">
</div>
<div class="menu">
  <h>What Is Your Choice?</h>
  <p>1. Be a Banker from Boston</p>
  <p>2. Be a Carpenter from Ohio</p>
  <p>3. Be a Farmer from Illinois</p>
  <p>4. Learn About the Differences</p>
</div>
<div id="bttnPlacement">
  <button id="myBttn">
                Press Spacebar to Return to Main Menu        
            </button>
</div>

＆＃13;

Answer 1

要使背景透明为仅文本，您需要覆盖默认按钮css

JsonConvert.PopulateObject

Answer 2

我认为你非常接近，但你的目标是错误的元素。

＆＃13;

#myBttn {
  text-align: center;
  color: black;
  background: transparent;
  border: none;
  outline: none;
  display: block;
  height: 100px;
  width: 300px;
  cursor: pointer;
  text-align: center;
}

＆＃13;

<div id="banner">
  <img src="/images/gameTitle.jpg" alt="Banner">
</div>
<div class="menu">
  <h>What Is Your Choice?</h>
  <p>1. Be a Banker from Boston</p>
  <p>2. Be a Carpenter from Ohio</p>
  <p>3. Be a Farmer from Illinois</p>
  <p>4. Learn About the Differences</p>
</div>
<div id="bttnPlacement">
  <button id="myBttn">
                Press Spacebar to Return to Main Menu        
            </button>
</div>

＆＃13;

我只更改了第一个类的选择器，以匹配button，而不是其容器div元素。

Answer 3

贸易

<button id="myBttn">
              Press Spacebar to Return to Main Menu        
          </button>

out with

<a id='myBttn' href='index.php'>Press Spacebar to Return to Main Menu</a>

（当然使用正确的菜单网址）然后执行

#myBttn:link,#myBttn:hover,#myBttn:active,#myBttn:visited{
  text-decoration:none; color:#000;
}

在你的CSS中

。随意改变颜色。

Answer 4

在这里按下您将看到的空间并使用

background:unset;
border:unset

在这里，您尝试选择带有ID的按钮。如果您要选择ID，则必须在#

之前声明此idname

#myBttn { //added # for select as id
  text-align: center;
}

$(window).keypress(function (e) {
  if (e.keyCode == 32) {
    alert('Your Action in here')
  }
})

#bttnPlacement {
  text-align: center;
  color: white;
  background: transparent;
  border: none;
  outline: none;
  display: block;
  height: 100px;
  width: 300px;
  cursor: pointer;
}

#myBttn {
  text-align: center;
  background: unset;
  border: unset;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
  <img src="" alt="Banner">
</div>
<div class="menu">
  <h>What Is Your Choice?</h>
  <p>1. Be a Banker from Boston</p>
  <p>2. Be a Carpenter from Ohio</p>
  <p>3. Be a Farmer from Illinois</p>
  <p>4. Learn About the Differences</p>
</div>
<div id="bttnPlacement">
  <button id="myBttn">
                Press Spacebar to Return to Main Menu        
            </button>
</div>

Answer 5

<html>
    <head>
        <style type="text/css">
        #bttnPlacement {
            text-align: center;
            height: 100px;
            width: 300px;
        }

        #myBttn {
            text-align: center;
            /*color: white;*/
            background: transparent;
            border: none;
            outline: none;
            display: block;
            cursor: pointer;

        }
        </style>
    </head>

    <body>
        <div id="banner">
            <img src="/images/gameTitle.jpg" alt="Banner">
        </div>
        <div class="menu">
            <h>What Is Your Choice?</h>
            <p>1. Be a Banker from Boston</p>
            <p>2. Be a Carpenter from Ohio</p>
            <p>3. Be a Farmer from Illinois</p>
            <p>4. Learn About the Differences</p>
        </div>
        <div id="bttnPlacement">
            <button id="myBttn">
                Press Spacebar to Return to Main Menu
            </button>
        </div>
    </body>
</html>

纯文字HTML按钮

5 个答案: