Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- Place favicon.ico in the root directory -->
- <link rel="stylesheet" href="css/normalize.css">
- <link rel="stylesheet" href="css/main.css">
- <meta name="theme-color" content="#fafafa">
- <style>
- .myButton{
- width: 200px;
- height: 60px;
- background-color: #cf6a87;
- color: #fff;
- border: none;
- font-family: arial;
- font-size: 14px;
- box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
- }
- .myButton-active{
- width: 10%;
- height: 10%;
- background-color: #c44569;
- color: #fff;
- border: none;
- font-family: arial;
- font-size: 14px;
- font-weight: bold;
- box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
- }
- .myButton:hover{
- -webkit-transition: background 200ms ease-in-out;
- -moz-transition: background 200ms ease-in-out;
- -ms-transition: background 200ms ease-in-out;
- -o-transition: background 200ms ease-in-out;
- transition: background 200ms ease-in-out;
- background-color: #c44569;
- cursor: pointer;
- }
- #container{
- margin: 0 auto;
- text-align: center;
- font-family: arial;
- margin-top: 100px;
- }
- </style>
- </head>
- <body>
- <!--[if IE]>
- <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>
- <![endif]-->
- <div id="container">
- <h2>Hello World!</h2>
- <button type="button" class="myButton" id="myButton">Click me</button>
- </div>
- <script src="main.js"></script>
- </body>
- </html>
- function init(){
- console.log("init called");
- btn = document.getElementById("myButton");
- document.addEventListener("click",btnClicked,false)
- }
- //wenn der Button geklickt wurde
- function btnClicked(){
- alert("Hey du hast mal was richtig gemacht! :)");
- }
- window.onload = init;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement