GetUIKit does not show a rectangle around the button

According to the HTML GetUiKit documentation, this html code should create 3 nice buttons, with a rectangle around the text. But this code only shows the text of the button, without the rectangle. https://getuikit.com/v2/docs/button.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-icons.min.js"></script>
  </head>
  <body>
    <a class="uk-button" href="">Link</a>
    <button class="uk-button" type="button">Button</button>
    <button class="uk-button" type="button" disabled>Disabled</button>
  </body>
</html>

how to solve this?

Solution

You are referring to old documentation and a lot of things were changed since v2. Have a look at current UIKit v3 (as you're using v3 in the snippet and you've used it in the previous question too)

https://getuikit.com/docs/button

Below you can see correctly used classes.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/css/uikit.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-icons.min.js"></script>
  </head>
  <body>
    <a class="uk-button uk-button-default" href="">Link</a>
    <button class="uk-button uk-button-primary" type="button">Button</button>
    <button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
  </body>
</html>