Как сделать квадратную кнопку

У меня есть кнопка на моем сайте, и я хочу сделать ее квадратной:

Как сделать квадратную кнопку и заставить ее по-прежнему действовать как кнопка, чтобы она немного изменилась, когда я прокручиваю ее

вот мой пример: обратите внимание, что кнопка не может быть нажата на

http://jsfiddle.net/HrUWm/

(какой css сделает эту работу?) вот что я попробовал:

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

4 ответов

Это будет работать:

.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/

5

пример: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 состояния кнопки, чтобы можно было применить другой стиль.

Читайте также: псевдоклассы действий пользователя: hover,: active и: focus

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>

кодепан.io

1

опция, которую я использую сейчас (я использую скрипты 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;
0