Styling links and buttons

Links come underlined and blue; a { color: ...; text-decoration: none; } changes that. Pseudo-classes select states: a:hover while the pointer is over it, a:focus-visible when reached by keyboard, button:disabled. Always give hover and focus a visible change; people rely on it.

A link styled as a button is display: inline-block (so padding applies properly), padding, a background color, a text color, and a border radius. Keep it a link (<a href>) when it navigates and a <button> when it does something on the page.

a { color: rgb(47, 111, 237); text-decoration: none; }
a:hover { text-decoration: underline; }
.btn { display: inline-block; padding: 8px 16px; background: rgb(47, 111, 237); color: white; border-radius: 6px; }

Your task

Remove the underline from links and make them rgb(47, 111, 237). Add an a:hover rule that underlines them again. Style .btn as a button: display: inline-block, 8px 16px padding, background rgb(47, 111, 237), white text (rgb(255, 255, 255)), and a 6px border radius.

Part of the final project. .btn is the button-styled link, with the link colors and the hover rule. It is saved in this browser and loaded into Project: a one-page site when you get there.

<!doctype html>
<html>
<head>
<style>
a { color: rgb(47, 111, 237); text-decoration: none; }
a:hover { text-decoration: underline; }
.btn {
  display: inline-block;
  padding: 8px 16px;
  background: rgb(47, 111, 237);
  color: rgb(255, 255, 255);
  border-radius: 6px;
}
</style>
</head>
<body>
<p>Read the <a href="#">documentation</a>.</p>
<a class="btn" href="#">Get started</a>
</body>
</html>