<button> html

<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

<a href="#" class="myButton">Search</a> .myButton { background:linear-gradient(to bottom, #8ca0c2 5%, #476e9e 100%); background-color:#8ca0c2; border-radius:13px; display:inline-block; cursor:pointer; color:#ffffff; font-family:Times New Roman; font-size:16px; font-weight:bold; padding:10px 15px; text-decoration:none; &:hover { background:linear-gradient(to bottom, #476e9e 5%, #8ca0c2 100%); background-color:#476e9e; } &:active { position:relative; top:1px; } }

Code answers related to "<button> html"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "<button> html"

Code answers related to "<button> html"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us