Button state test

Developer
Tomoyuki Kashiro
Size
2,954 Kb
Views
10,120
  1. Button state test Previews
  2. Button state test HTML Codes
  3. Button state test CSS Codes
  4. Button state test JS Codes

How do I make an button state test?

Http://googlesamples.github.io/web-fundamentals/samples/input/touch/states-example.html. What is a button state test? How do you make a button state test? This script and codes were developed by Tomoyuki Kashiro on 19 January 2023, Thursday.

Button state test Previews
IQ Test

Button state test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>button state test</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>button state test</h1>
<ul class="desc"> <li style="color: blue">:normal</li> <li style="color: red">:hover</li> <li style="color: green">:focus</li> <li style="color: gray">:active</li>
</ul>
<button class="btn" tabindex="1">Button 1</button>
<button class="btn hover" tabindex="2">Button 2</button>
<button class="btn active" tabindex="3">Button 3</button>
<button class="btn focus" tabindex="4">Button 4</button> <script src="js/index.js"></script>
</body>
</html>

Button state test - Script Codes CSS Codes

body { background-color: #d3e2fc; margin: 32px; font-family: 'Roboto', sans-serif; color: #ecf0f1;
}
h1 { font-size: 3rem; color: #999; margin-bottom: 30px;
}
.desc { margin-bottom: 30px;
}
.desc li { display: inline;
}
a { color: #ecf0f1;
}
button { display: block; width: 100%; max-width: 400px; padding: 16px; margin: 0 auto 16px auto; box-sizing: border-box; border-style: none; border-radius: 6px; color: inherit; font-family: inherit; font-size: inherit; text-align: center; text-decoration: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
.btn { background-color: blue;
}
.btn:hover { background-color: red;
}
.btn:focus { background-color: green; /* The outline parameter surpresses the border color / outline when focused */ outline: 0;
}
.btn:active { background-color: gray;
}
/* Webkit / Chrome Specific CSS to remove tap highlight color */
.btn { -webkit-tap-highlight-color: transparent;
}
/* Firefox Specific CSS to remove button differences and focus ring */
.btn { background-image: none;
}
.btn::-moz-focus-inner { border: 0;
}

Button state test - Script Codes JS Codes

window.onload = function() { if(/iP(hone|ad)/.test(window.navigator.userAgent)) {	document.body.addEventListener('touchstart', function() {}, false); }
}
Button state test - Script Codes
Button state test - Script Codes
Home Page Home
Developer Tomoyuki Kashiro
Username Tkashiro
Uploaded January 19, 2023
Rating 3
Size 2,954 Kb
Views 10,120
Do you need developer help for Button state test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tomoyuki Kashiro (Tkashiro) Script Codes
Name
Page transition
3 lines menu button
Media Fragments URI
Simple arc animation
CSS Slideshow
Simple sort algorithm in JavaScrip
Responsive image srcset
CSS Animation Sample
Shadow Dom Test
Manage Async Animation by using jQuery.DeferredPipeline
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!