Hover helicopter button formatting


#1

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,

Charlie.

https://www.codecademy.com/courses/web-ext/projects/html-css-prj_shutterbugg?user_id=577d073f14f3ef0528000510

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- 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>
      </div>
    </div>

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

      </div>
    </div>

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

      </div>
    </div>

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

      </div>
    </div>

    
    <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" />
    </div>

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

  </body>
</html>

.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-size:18px;
  font-weight: 200;
}
.download{
  border-radius: 3px;
  background-color:rgba(238,68,95,0.9);
	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;
  padding-bottom:100px
}

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


#2

@charliegavins,
With a google search
bootstrap shadow effect button site:getbootstrap.com
found
http://blog.getbootstrap.com/2013/10/29/bootstrap-3-0-1-released/
•#10112: More role attributes in the docs, this time on link buttons
https://github.com/twbs/bootstrap/pull/10112

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==
http://getbootstrap.com/css/#buttons


#3

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