Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Picross Style Buttons

As in, the game PICROSS3D.

CSS3 Technique

 

Button Button Button

 

.btn {
  color: white;
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 20px;
  text-decoration: none;
  text-shadow: -1px -1px 1px #616161;
  position: relative;
  padding: 15px 30px;
  -webkit-box-shadow: 5px 5px 0 #666;
  -moz-box-shadow: 5px 5px 0 #666;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  margin: 0 10px 0 0;
}

.btn:hover {
  -webkit-box-shadow: 0px 0px 0 #666;
  -moz-box-shadow: 0px 0px 0 #666;
  top: 5px;
  left: 5px;
}

jQuery Technique

Smoother, but more markup and CSS needed.

<div class="rela">
  <a class="btn green btn1" href="index.html">Jack</a>
  <span class="shadow"></span>
</div>
.rela {
	display: block;
	width: 96px;
	height: 56px;
	position: relative;
	margin: 10px;
}
.btn {
	display: block;
	line-height: 56px;
	text-align: center;
	color: white;
	font-family: Helvetica, Arial, Sans-Serif;
	font-size: 20px;
	text-decoration:none;
	text-shadow: -1px -1px 1px #616161;
	position: relative;
}
.shadow {
	position: absolute;
	top:5px;
	left: 5px;
	background: #666;
	z-index: -1;
	width: 100%;
	height: 100%;
}
$(".btn").hover(function(){
	$(this).stop().animate({ 
		top: "5",
		left: "5"
	}, 100 );
},
function(){
	$(this).stop().animate({ 
		top: 0,
		left: 0
	}, 100 );
});

Comments

  1. Permalink to comment#

    i think to implement it we can use :hover on CSS instead of using JQUERY

    that will save more memory and pageload time :-)

  2. Hendra
    Permalink to comment#

    No, the demo doesn’t show the jQuery effect. it’s basically like Chris said. CSS3 technique is shorter , jQuery technique is smoother but requires more markups.

  3. nathan
    Permalink to comment#

    This page crashes Mobile Safari on iPad, FYI.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```