html button properties code example

Example 1: how to add buttons in html

<button type="button" onclick="alert('You pressed the button!')">Click me!</button>

Example 2: html button

<html>
  <head>
        <style>
          .button {
 			background-color: <background color>;
  			border: none;
 			color: <text color>;
  			padding: 10px 25px;
  			text-align: center;
 			text-decoration: none;
  			display: inline-block;
  			font-size: 16px;
  			margin: 4px 4px;
  			cursor: pointer;
  			border-radius: 8px;
			}
  		</style>
	</head>
	<body>
      <a href="<url>" class="button">ButtonText</a>
 	</body>
</html>

Example 3: html css good button

<button style="background-color: turquoise; border: none; border-radius: 5px; color: #333; /* Dark grey */ padding: 15px 32px">Example button</button>

Example 4: html button

<!-- Normal HTML with javascript -->


<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons</title>
  </head>
  <body>
    <button onclick = "myfunction()">OK</button>
    <script>
      	function myfunction() {
        	alert("This is a working button");
      	}
    </script>
  </body>
</html>


<!-- Normal HTML with jquery -->


<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons</title>
	<!--scripts \/-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <button id="buttonAlert">OK</button>
    <script>
      $("#buttonAlert").click(
      	function(){
  			alert("This is a working button");
      		}
    	); 
    </script>
  </body>
</html>


<!-- HTML with vue -->


<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons</title>
    <!--scripts \/-->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <!--You need a palce to mount the app/widget-->
    <!--Example 1 - there is no template-->
    <div id="app">

        <button v-on:click="activate">OK</button>
    </div>
    <!--mount to id APP-->

    <!--You need a palce to mount the app/widget-->
    <!--Example 2 - with template-->
    <div id="app_2">
    </div>
    <!--mount to id APP-->

    <script>
        const app_1 = {
            data() {
                msg_1 = "Example 1"
            },
            methods: {
                activate: function() {
                    alert(msg_1)
                }
            }
        }
        api_1 = Vue.createApp(app_1)
        api_entry_1 = api_1.mount("#app")
        console.log(api_entry_1)

        const app_2 = {
            data() {
                msg = "Example 2"
            },
            methods: {
                runb: function() {
                    alert(msg)
                }

            },
            template: `
                <button v-on:click="runb">Now</button>
            `
        }
        api_2 = Vue.createApp(app_2)
        api_entry_2 = api_2.mount("#app_2")
        console.log(api_entry_2)
    </script>
</body>
</html>

Tags:

Recent Posts