Comment faire un bouton carré

J'ai un bouton sur mon site et je veux qu'il soit carré:

Comment faire un bouton carré et de le rendre encore agir comme un bouton de sorte qu'il change un peu quand je scroll sur elle

voici mon exemple: notez que le bouton ne peut pas être cliqué sur

http://jsfiddle.net/HrUWm/

(ce css va faire ce travail?)
voici ce que j'ai essayé:

<input class="butt" type="button" value="test"/>
.butt{ border: 1px outset blue;  background-color: lightBlue;}
d'un bout à bout carré, hein? 😉

OriginalL'auteur Crushinator | 2013-04-05

  1. 6

    Cela va faire le travail:

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

    OriginalL'auteur Miguel

  2. 3

    Exemple: 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;
}

    L'élément clé est la sélecteurs correspondant à la :active et :hover états du bouton, pour permettre à un autre style à appliquer.

    Voir aussi: L'action de l'utilisateur pseudo-classe :hover, :active et :focus

    OriginalL'auteur Tim Medora

  3. 0

    Une option j'utilise maintenant (je suis en utilisant AngularJS & Bootstrap scripts)

    HTML:

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

    CSS:

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

    OriginalL'auteur PCSailor