how to make a button in html

Solutions on MaxInterview for how to make a button in html by the best coders in the world

showing results for - "how to make a button in html"

04 Oct 2020

1<!-- html button tag example -->
2<button type="button">Click Me!</button>
3
4<!-- html example code for button -->
5<html>
6  <head>
7    <title>Example Button Code</title>
8  </head>
9  
10  <body>
11    <button onclick="buttonFunction()">Click Me!</button>
12    
13    <script>
14      function buttonFunction() {
15        console.log("This function is called when the button is pressed");
16      }
17    </script>
18    
19  </body>
20</html>

source

Gianluca

05 Feb 2016

1<form action="https://google.com">
2    <input type="submit" value="Go to Google" />
3</form>
4

Juan David

19 May 2019

1<html>
2  <head>
3        <style>
4          .button {
5 			background-color: <background color>;
6  			border: none;
7 			color: <text color>;
8  			padding: 10px 25px;
9  			text-align: center;
10 			text-decoration: none;
11  			display: inline-block;
12  			font-size: 16px;
13  			margin: 4px 4px;
14  			cursor: pointer;
15  			border-radius: 8px;
16			}
17  		</style>
18	</head>
19	<body>
20      <a href="<url>" class="button">ButtonText</a>
21 	</body>
22</html>

Luciano

17 Feb 2018

1<!-- Normal HTML with javascript -->
2
3
4<html>
5  <head>
6    <meta charset="UTF-8">
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>Buttons</title>
10  </head>
11  <body>
12    <button onclick = "myfunction()">OK</button>
13    <script>
14      	function myfunction() {
15        	alert("This is a working button");
16      	}
17    </script>
18  </body>
19</html>
20
21
22<!-- Normal HTML with jquery -->
23
24
25<html>
26  <head>
27    <meta charset="UTF-8">
28    <meta http-equiv="X-UA-Compatible" content="IE=edge">
29    <meta name="viewport" content="width=device-width, initial-scale=1.0">
30    <title>Buttons</title>
31	<!--scripts \/-->
32	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
33  </head>
34  <body>
35    <button id="buttonAlert">OK</button>
36    <script>
37      $("#buttonAlert").click(
38      	function(){
39  			alert("This is a working button");
40      		}
41    	); 
42    </script>
43  </body>
44</html>
45
46
47<!-- HTML with vue -->
48
49
50<html>
51<head>
52    <meta charset="UTF-8">
53    <meta http-equiv="X-UA-Compatible" content="IE=edge">
54    <meta name="viewport" content="width=device-width, initial-scale=1.0">
55    <title>Buttons</title>
56    <!--scripts \/-->
57    <script src="https://unpkg.com/vue@next"></script>
58</head>
59
60<body>
61    <!--You need a palce to mount the app/widget-->
62    <!--Example 1 - there is no template-->
63    <div id="app">
64
65        <button v-on:click="activate">OK</button>
66    </div>
67    <!--mount to id APP-->
68
69    <!--You need a palce to mount the app/widget-->
70    <!--Example 2 - with template-->
71    <div id="app_2">
72    </div>
73    <!--mount to id APP-->
74
75    <script>
76        const app_1 = {
77            data() {
78                msg_1 = "Example 1"
79            },
80            methods: {
81                activate: function() {
82                    alert(msg_1)
83                }
84            }
85        }
86        api_1 = Vue.createApp(app_1)
87        api_entry_1 = api_1.mount("#app")
88        console.log(api_entry_1)
89
90        const app_2 = {
91            data() {
92                msg = "Example 2"
93            },
94            methods: {
95                runb: function() {
96                    alert(msg)
97                }
98
99            },
100            template: `
101                <button v-on:click="runb">Now</button>
102            `
103        }
104        api_2 = Vue.createApp(app_2)
105        api_entry_2 = api_2.mount("#app_2")
106        console.log(api_entry_2)
107    </script>
108</body>
109</html>

Jonas

25 Oct 2018

1<a href="FILE"> NAME </a> <!-- link to html -->

similar questions

how to create an html button using the button tag in an a tag button tag with a tag button functions html htmlround buttons buttosn html button

queries leading to this page