Semantic UI

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Semantic UI Template</title>
        <link rel="stylesheet" href="styles.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
      </head>
      <body>
        <div class="main">
           <h1>Hello World !</h1>
          <button id="hi" class="ui basic button">
            <i class="icon user"></i>
            Say Hi !
          </button>
        
          <div id="alert" class="ui visible message" style="display:none;">
              <p>Hello !</p>
          </div>
        </div>
        <script src="script.js"></script>
      </body>
    </html>

index.html

body{
  padding: 25px;
}
.title {
	color: #5C6AC4;
}
.main{
  margin-left:12px;
}

styles.css

$( document ).ready(function() {
 $( "#hi" ).click(function() {
    $("#alert").toggle();
 });
});