HTML Buttom

<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>

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>

Posted by: Guest on February-16-2021

Code answers related to "HTML Buttom"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "HTML Buttom"

Code answers related to "HTML Buttom"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us