CSS 方形按钮的制作方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15823871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a square button
提问by Crushinator
I have a button on my website and I want to make it square:
我的网站上有一个按钮，我想让它变成方形：
How do a make a square button and make it still act like a button so it changes a little bit when i scroll over it
如何制作一个方形按钮并使它仍然像一个按钮一样，所以当我滚动它时它会发生一点变化
here is my example: note that the button can't be clicked on
这是我的例子：注意不能点击按钮
(what css will make this work?) here is what i tried:
（什么 css 会使这个工作？）这是我尝试过的：
<input class="butt" type="button" value="test"/>
.butt{ border: 1px outset blue; background-color: lightBlue;}
采纳答案by Miguel
This will do the work:
这将完成以下工作：
.butt {
border: 1px outset blue;
background-color: lightBlue;
height:50px;
width:50px;
cursor:pointer;
}
.butt:hover {
background-color: blue;
color:white;
}
回答by Tim Medora
Example: http://jsfiddle.net/HrUWm/7/
示例：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;
}
The key piece is the selectors matching the :activeand :hoverstates of the button, to allow a different style to be applied.
关键部分是与按钮的:active和:hover状态匹配的选择器，以允许应用不同的样式。
See also: The user action pseudo-classes :hover, :active, and :focus
回答by Hardik
Try something like this
尝试这样的事情
.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>回答by PCSailor
An option I am using now (I'm using AngularJS & Bootstrap scripts)
我现在使用的一个选项（我使用的是 AngularJS 和 Bootstrap 脚本）
HTML:
HTML：
<a href="#!login" class="btn">Log In</a>
CSS:
CSS：
padding: 40px 0px 40px 0px;
text-decoration: none;
width: 250px !important;
height: 250px !important;
