Learn HTML and CSS: A soft change with transition

Transition

When you put the mouse on the button, it jumps from red to blue in one go. "That makes you jump," says Walter. A soft change feels calmer, and the site looks finished at once.

A soft change

With transition a change happens gradually instead of in one go. transition: background-color 0.2s lets the background colour change over 0.2 seconds. Put the transition on the element itself, not on :hover, so the colour also returns softly when the mouse leaves. Keep it short: between 0.15 and 0.3 seconds feels quick.

A small shift can be soft too: transform: translateY(-4px) lifts a bench 4px, without moving the rest of the page.

For anyone who asks their device for less motion, @media (prefers-reduced-motion: reduce) is the place to switch the transition off. Put the mouse on the button and on the benches.

style.css

1.button {2  transition: background-color 0.2s;3}4.button:hover {5  background-color: #1f4e5f;6}7.bench {8  transition: transform 0.2s;9}10.bench:hover {11  transform: translateY(-4px);12}13@media (prefers-reduced-motion: reduce) {14  .button,15  .bench {16    transition: none;17  }18}

repaircafe.example

Try it yourself

Make the button turn dark blue softly on hover, #1f4e5f, over 0.2 seconds, and return softly too.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Broken? Not Today!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="benches.html">Benches</a>15      <a href="dates.html">Dates</a>16      <a href="sign-up.html">Sign up</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Every first Saturday of the month at the parish hall in Dorchester. Bring your broken things: we fix them together.</p>21    <a class="button" href="sign-up.html">Sign up your device</a>22    <section class="benches">23      <article class="bench bike">24        <span class="tag">Full</span>25        <h2>Bikes</h2>26        <p>A flat tyre or a weak brake? Jeff and Mark will help you.</p>27      </article>28      <article class="bench electrics">29        <h2>Electrics</h2>30        <p>Lamps, toasters and coffee machines.</p>31      </article>32      <article class="bench sewing">33        <span class="tag">New</span>34        <h2>Sewing corner</h2>35        <p>A loose seam or a broken zip.</p>36      </article>37      <article class="bench computer">38        <h2>Computers</h2>39        <p>A slow laptop or a cracked screen.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parish hall, 12 Church Street, Dorchester DT1 1JG</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

A soft change

A small shift can be soft too: transform: translateY(-4px) lifts a bench 4px, without moving the rest of the page.

For anyone who asks their device for less motion, @media (prefers-reduced-motion: reduce) is the place to switch the transition off. Put the mouse on the button and on the benches.

style.css

1.button {2  transition: background-color 0.2s;3}4.button:hover {5  background-color: #1f4e5f;6}7.bench {8  transition: transform 0.2s;9}10.bench:hover {11  transform: translateY(-4px);12}13@media (prefers-reduced-motion: reduce) {14  .button,15  .bench {16    transition: none;17  }18}

repaircafe.example

Try it yourself

Make the button turn dark blue softly on hover, #1f4e5f, over 0.2 seconds, and return softly too.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Broken? Not Today!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="benches.html">Benches</a>15      <a href="dates.html">Dates</a>16      <a href="sign-up.html">Sign up</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Every first Saturday of the month at the parish hall in Dorchester. Bring your broken things: we fix them together.</p>21    <a class="button" href="sign-up.html">Sign up your device</a>22    <section class="benches">23      <article class="bench bike">24        <span class="tag">Full</span>25        <h2>Bikes</h2>26        <p>A flat tyre or a weak brake? Jeff and Mark will help you.</p>27      </article>28      <article class="bench electrics">29        <h2>Electrics</h2>30        <p>Lamps, toasters and coffee machines.</p>31      </article>32      <article class="bench sewing">33        <span class="tag">New</span>34        <h2>Sewing corner</h2>35        <p>A loose seam or a broken zip.</p>36      </article>37      <article class="bench computer">38        <h2>Computers</h2>39        <p>A slow laptop or a cracked screen.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parish hall, 12 Church Street, Dorchester DT1 1JG</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example