greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor hover state of a button for readability (#14158) 

Change challenge description of height to width because that is what
the example in the description shows. Add extra spacing in the example
and seed code to make them easier to read. Change the description of
milliseconds to improve readability.
pull/18182/head
Sebastian Petak 2017-04-24 11:01:44 -05:00 committed by mrugesh mohapatra
parent f17ca7cc25
commit 920588d85b
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
challenges/01-responsive-web-design/applied-visual-design.json
View File

@ -2079,10 +2079,10 @@
"title": "Use CSS Animation to Change the Hover State of a Button",
"description": [
"You can use CSS <code>@keyframes</code> to change the color of a button in its hover state.",
"Here's an example of changing the height of an image on hover:",
"<blockquote>&lt;style&gt;<br> img:hover {<br> animation-name: width;<br> animation-duration: 500ms;<br> }<br> @keyframes width {<br> 100% {<br> width: 40px;<br> }<br> }<br>&lt;/style&gt;<br>&lt;img src=&quot;https://bit.ly/smallgooglelogo&quot; alt=&quot;Google's Logo&quot; /&gt;</blockquote>",
"Here's an example of changing the width of an image on hover:",
"<blockquote>&lt;style&gt;<br> img:hover {<br> animation-name: width;<br> animation-duration: 500ms;<br> }<br><br> @keyframes width {<br> 100% {<br> width: 40px;<br> }<br> }<br>&lt;/style&gt;<br><br>&lt;img src=&quot;https://bit.ly/smallgooglelogo&quot; alt=&quot;Google's Logo&quot; /&gt;</blockquote>",
"<hr>",
"Note that <code>ms</code> stands for milliseconds, which are 1/1000 of a second.",
"Note that <code>ms</code> stands for milliseconds, where 1000ms is equal to 1s.",
"Use CSS <code>@keyframes</code> to change the <code>background-color</code> of the <code>button</code> element so it becomes <code>#4791d0</code> when a user hovers over it. The <code>@keyframes</code> rule should only have an entry for <code>100%</code>."
],
"challengeSeed": [
@ -2093,6 +2093,7 @@
" background-color: #0F5897;",
" padding: 5px 10px 8px 10px;",
" }",
" ",
" button:hover {",
" animation-name: background-color;",
" animation-duration: 500ms;",
@ -2100,6 +2101,7 @@
" ",
" ",
"</style>",
" ",
"<button>Register</button>"
],
"tests": [