Hover helicopter button formatting

I’m on step one on Shutterbug. Everything smooth other than I can’t replicate the effect that the model uses to get the button to have a nice smooth shadow. I’ve ‘inspected element’ to see what has been done, and I think I’ve replicated it, but I’m not getting any action.

What am I missing?

Many thanks,



<!doctype html>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <!-- The main section -->
    <div class="main">
      <div class="container">
        <h1>Introducing Shutterbugg</h1>
        <h2>Capture the moments that matter.</h2>
        <a class="download" href="#">Download Shutterbugg</a>

    <!-- The first section div -->
    <div class="section">
      <div class="container">


    <!-- The second section div -->
    <div class="section">
      <div class="container">


    <!-- The third section div -->
    <div class="section">
      <div class="container">


    <div class="store section container">
      <h2>Available for iPhone, iPad, and Android.</h2>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
      <img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />

    <!-- The footer div -->
    <div class="footer">
      <div class="container">


.container {
  max-width: 928px;
h1, h2, p, a {
  font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;

h1 {
  font-size: 64px;
  font-weight: 100;
  margin-bottom: 20px;

a {
  font-weight: 200;
  border-radius: 3px;
	color: #FFF;
  padding: 8px 30px;
  position: relative;
  transition: box-shadow 0.5s;
  top: 30px;
.main {
  height: 550px;
  padding-top: 55px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg) no-repeat fixed center; 

.main p {
  font-size: 26px;
  font-weight: 200;  
  margin-bottom: 40px;

.section .row {
  padding-top: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #dbdbdb;

.store {
  text-align: center;
  border-bottom: 0px;

.footer {
  border-top: 1px solid #dbdbdb;
  background-color: #f3f3f3;
  padding: 20px 0px 80px;

.footer ul {
  list-style-type: none;
  padding-left: 0;

.footer li {
  color: #999;
  font-weight: 600;

@media (max-width: 500px) {
  .col-md-6 img {
    padding: 50px;
    width: 100%;

With a google search
bootstrap shadow effect button site:getbootstrap.com
#10112: More role attributes in the docs, this time on link buttons

Would you might pull and updating?
Kevin Suttle added some commits on Aug 24 2013

Add role=“button” to <a> buttons … 0add770
Add even more role=“button” attributes …
==found documentation==

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.