Question

我的网站上有一个按钮，我想让它成为正方形：

如何制作方形按钮并使其仍然像按钮一样，当我滚动它时它会稍微改变

这是我的例子：请注意，无法点击该按钮

（什么css会使这个工作？）这是我试过的：

<input class="butt" type="button" value="test"/>
.butt{ border: 1px outset blue;  background-color: lightBlue;}

Answer 1

这将完成工作：

.butt {
   border: 1px outset blue;
   background-color: lightBlue;
   height:50px;
   width:50px;
   cursor:pointer;
}

.butt:hover {
   background-color: blue;
   color:white;
}

http://jsfiddle.net/J8zwC/

Answer 2

示例：http://jsfiddle.net/HrUWm/7/

.btn{
   border: 1px solid #ddd;
   background-color: #f0f0f0;
   padding: 4px 12px;

    -o-transition: background-color .2s ease-in; 
    -moz-transition: background-color .2s ease-in;
    -webkit-transition: background-color .2s ease-in; 
    transition: background-color .2s ease-in; 
}

.btn:hover {
    background-color: #e5e5e5;    
}

.btn:active {
    background-color: #ccc;
}

关键部分是与按钮的:active和:hover状态匹配的选择器，以允许应用不同的样式。

另请参阅：The user action pseudo-classes :hover, :active, and :focus

Answer 3

尝试这样的事情

.square {
  background: #000;
  height: 200px;
  width: 380px;
  border-radius: 20px;
  color: #fff;
  text-align: center;
}
.button:hover {
  background-color: #000;
}
.sub-content {
  font-size: 25px;
/*   text-shadow: 0 0 10px white; */
/*   font-style: oblique; */
  font-family: 'Prosto One;
}

.main-content {
  margin-top: 30px;
  font-size: 45px;
  font-family: 'Prosto One';
/*   text-shadow: 0 0 20px white; */
}

.align-content {
  position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.button:active {
  background-color: #000;
  box-shadow: 0 5px #383838;
  transform: translateY(4px);
}
.button {
  box-shadow: 0 9px #383838;
  cursor: pointer;
}

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prosto+One" rel="stylesheet">
<!-- <div class="triangle-with-shadow"></div> -->
<div class="square button">
  <div class="align-content">
    <span class="main-content">Create Repair</span><br> 
    <span class="sub-content">The Mobile Shop </span>
  </div>
</div>

codepane.io

Answer 4

我现在使用的一个选项（我使用AngularJS和Bootstrap脚本）

<强> HTML：

<a href="#!login" class="btn">Log In</a>

<强> CSS：

padding: 40px 0px 40px 0px;
text-decoration: none;
width: 250px !important;
height: 250px !important;

如何制作方形按钮

4 个答案: