0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<ul><li>index.html</li>
1
<ul><li>index.html</li>
2
<li>style.css</li>
2
<li>style.css</li>
3
</ul><p>HTML</p>
3
</ul><p>HTML</p>
4
<p><!DOCTYPE html> <html lang="en"> <head> <title>On-hover effects: buttons, part 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="buttons"> <button class="btn-green" type="button"> <img class="icon" src="icons/reload-6x-white.png" alt="Reloading the icon"> Refresh </button> <button class="btn-yellow" type="button"> <span class="hidden">25<img src="icons/dollar-6x-white.png" alt="Dollar icon"></span> <img class="icon" src="icons/cart-6x-white.png" alt="Cart icon"> Buy </button> </div> </body> </html></p>
4
<p><!DOCTYPE html> <html lang="en"> <head> <title>On-hover effects: buttons, part 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="buttons"> <button class="btn-green" type="button"> <img class="icon" src="icons/reload-6x-white.png" alt="Reloading the icon"> Refresh </button> <button class="btn-yellow" type="button"> <span class="hidden">25<img src="icons/dollar-6x-white.png" alt="Dollar icon"></span> <img class="icon" src="icons/cart-6x-white.png" alt="Cart icon"> Buy </button> </div> </body> </html></p>
5
<p>Thanks! We’ll fix everything at once!</p>
5
<p>Thanks! We’ll fix everything at once!</p>
6
<p>You’ve gone to a different page</p>
6
<p>You’ve gone to a different page</p>
7
<p>Click inside the mini-browser to shift the focus onto this window.</p>
7
<p>Click inside the mini-browser to shift the focus onto this window.</p>
8
<p>100%</p>
8
<p>100%</p>
9
<ol><li>For .btn-yellow:hover .hidden, set opacity to be equal to 1.</li>
9
<ol><li>For .btn-yellow:hover .hidden, set opacity to be equal to 1.</li>
10
<li>For .btn-yellow:hover .icon set the scale transform to the value 10.</li>
10
<li>For .btn-yellow:hover .icon set the scale transform to the value 10.</li>
11
<li>And also set opacity to 0.</li>
11
<li>And also set opacity to 0.</li>
12
</ol><p>After you complete every change, hover the cursor over the yellow button to check your work.</p>
12
</ol><p>After you complete every change, hover the cursor over the yellow button to check your work.</p>