Advertisement
Guest User

Untitled

a guest
Oct 23rd, 2019
112
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.17 KB | None | 0 0
  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <title></title>
  7. <meta name="description" content="">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9.  
  10. <!-- Place favicon.ico in the root directory -->
  11.  
  12. <link rel="stylesheet" href="css/normalize.css">
  13. <link rel="stylesheet" href="css/main.css">
  14.  
  15. <meta name="theme-color" content="#fafafa">
  16.  
  17. <style>
  18. .myButton{
  19. width: 200px;
  20. height: 60px;
  21. background-color: #cf6a87;
  22. color: #fff;
  23. border: none;
  24. font-family: arial;
  25. font-size: 14px;
  26. box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  27. }
  28.  
  29. .myButton-active{
  30. width: 10%;
  31. height: 10%;
  32. background-color: #c44569;
  33. color: #fff;
  34. border: none;
  35. font-family: arial;
  36. font-size: 14px;
  37. font-weight: bold;
  38. box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  39. }
  40.  
  41. .myButton:hover{
  42. -webkit-transition: background 200ms ease-in-out;
  43. -moz-transition: background 200ms ease-in-out;
  44. -ms-transition: background 200ms ease-in-out;
  45. -o-transition: background 200ms ease-in-out;
  46. transition: background 200ms ease-in-out;
  47.  
  48. background-color: #c44569;
  49. cursor: pointer;
  50. }
  51.  
  52. #container{
  53. margin: 0 auto;
  54. text-align: center;
  55. font-family: arial;
  56. margin-top: 100px;
  57. }
  58. </style>
  59. </head>
  60.  
  61. <body>
  62. <!--[if IE]>
  63. <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  64. <![endif]-->
  65.  
  66. <div id="container">
  67. <h2>Hello World!</h2>
  68. <button type="button" class="myButton" id="myButton">Click me</button>
  69. </div>
  70.  
  71. <script src="main.js"></script>
  72.  
  73. </body>
  74.  
  75. </html>
  76.  
  77.  
  78. function init(){
  79. console.log("init called");
  80. btn = document.getElementById("myButton");
  81. document.addEventListener("click",btnClicked,false)
  82.  
  83. }
  84.  
  85. //wenn der Button geklickt wurde
  86. function btnClicked(){
  87. alert("Hey du hast mal was richtig gemacht! :)");
  88. }
  89.  
  90. window.onload = init;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement