Shutterbug change text decoration


#1



https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_shutterbugg

In Shutterbugg cant change text decoration in <a> tag (( And cant make pretty transition like in example in Objective of project (( Help. I added styles in css but button not working :frowning:

Why this css is not working?
.download{
  background-color: rgba(238,68,95,0.9);
  border-radius: 4px;
  text-decoration: none;
  padding: 8px 30px;
  color: white;
  transition: box-shadow 0.5s;
}

a:hover{
  transition: box-shadow 0.5s;
  text-decoration: none;
}


#3

@tagrunner55136,
Have you checked
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Browser_compatibility

and
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
http://stackoverflow.com/questions/26504920/spinning-effect-anchor-tag-css3


#4

try placing your text-decoration: none; in your a { } selctor such as:

a {
font-size:18px;
font-weight: 200;
text-decoration: none !important ;
}

You shouldn't need the !important but it will almost certainly work if something is overriding it.

As for the Transition, you haven't added anything for the element to transition into. try this:


.download {
background-color: rgba(238,68,95,0.9);
border-radius: 4px;
color: #fff;
padding: 8px 30px;
transition: box-shadow 0.5s;
box-shadow: none; /* This is the part your missing*/
}
.download:hover{
color: #000;
box-shadow: 0 0 10px 40px #FFF; /* The values here are also missing. This example is extreme so you can see the effect*/
}

remember the element is just the link/text in this example. The .download is the button which has a box-shadow effect applied to it. Hope this helps!