Need some CSS Help, I am very close, but can't quite get this

HTML & CSS
1

Here is my page: http://funmedusa.com

You can see on the right hand side there is a black button that says “Executive Summary”. This is positioned correctly, and looks right, but I need it to “grow”, for lack of the correct term, and transition on mouseover just like it does here:

http://piccsy.com/investors/

2

Hi funmed. Welcome to the forums. :slight_smile:

You haven’t really grasped how they are going about this. Firstly, it’s all done on the <a> element, rather than using a div. And the only real thing being done is that the top negative margin is removed on hover. There’s a nice transition because of the added CSS3 transition code. Here’s the important code extracted (which is a working demo):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.executive-summary {
margin-top: -10px;
font-size: .8em;
position: absolute;
right: 5px;
top: 0;
background: #000;
text-align: center;
color: #FFF;
width: 68px;
padding: 32px 3px 7px 3px;
transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-duration: .3s;
-moz-transition-duration: .3s;
-webkit-transition-duration: .3s;
-o-transition-duration: .3s;
}

.executive-summary:after {
content: '';
position: absolute;
top: 100%;
left: 0;
height: 0;
width: 0;
border-top: solid 36px #000;
border-left: solid 37px rgba(0, 0, 0, 0);
border-right: solid 37px rgba(0, 0, 0, 0);
}

.executive-summary:hover {
margin-top: 0;
}

</style>
</head>
<body>

<a href="" class="executive-summary">
	Executive Summary
</a>

</body>
</html>
3