14

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

http://jsfiddle.net/HrUWm/

(what css will make this work?) here is what i tried:

<input class="butt" type="button" value="test"/>
.butt{ border: 1px outset blue;  background-color: lightBlue;}
1
  • 8
    a square butt eh? ;)
    – Jakub
    Apr 5, 2013 at 0:20

4 Answers 4

10

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

http://jsfiddle.net/J8zwC/

3

Example: 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 :active and :hover states of the button, to allow a different style to be applied.

See also: The user action pseudo-classes :hover, :active, and :focus

1

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>

codepane.io

-1

An option I am using now (I'm using 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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.