主页 / 问题 / 783171
Accepted
LiaVa
Asked:2020-02-10 23:40:36 +0000 UTC2020-02-10 23:40:36 +0000 UTC

按钮样式

  • 772

你好！情况如下：

有一个div。它需要表现得像一个按钮，里面有内容。也就是说，使里面的文本和块在中心（垂直和水平）对齐，并且当调整边框的大小时，块的内部和外部尺寸不会改变。

这个问题可能很愚蠢，但我对css还是比较陌生，所以我请求你的帮助。

html

3 个回答

  1. .button {
  box-sizing: padding-box;
  display: inline-block;
  padding: 12px 28px;
  background: yellow;
  border: 1px solid lightgray;
  color: black;
  border-radius: 4px;
  box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.2);
  font-family: "Helvetica", "Roboto";
}
    <a href="http://ru.stackoverflow.com" target="_blank">
  <div class="button">Моя кнопочка</div>
</a>

    • 3
  2. Best Answer

    .div_btn{
  width:150px;
  height:40px;
  background: tomato;
  display:flex;
  align-items:center;
  justify-content:center;
}

.div_btn a{
  text-transform:uppercase;
  font-size:14px;
  color:#fff;
  font-weight:900;
  font-family:sans-serif;
  text-decoration:none;
}
    <div class="div_btn">
  <a href="#">Подробнее</a>
  
</div>

    • 2 

  3. .btn {
    align-items: flex-start;
    width: 100%;
    max-width: 120px;
    text-align: center; 
    box-sizing: border-box;
    padding: 2px 6px 3px; 
    cursor:pointer;
    border:none; 
    background: #FFEB3B;
    outline: none !important;
    margin: 0em;
    font: 400 13.3333px Arial;
}
 
    <div class="btn">Кнопка</div>
<br/>
<button class="btn">Кнопка</button>

    • 1

相关问题