A Pen by Ellyria

Thumbnail
This awesome code was written by Ellyria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ellyria ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Ellyria</title>
  		<title>Fun With Buttons</title>
		<!-- Declare the character set -->
		<meta charset="utf-8" />
		<!-- Support for older (IE9 or older) Microsoft browsers: -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- Automatically scale contents to viewport size and orientation: -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section id="introduction">
	<h1>Fun With Buttons</h1>
	<p>
		Before you begin, you'll need to decide whether you want to use an <a class="inline" href="https://www.w3schools.com/tags/tag_a.asp" target="_blank">anchor</a>, a <a class="inline" href="https://www.w3schools.com/tags/tag_button.asp" target="_blank">button</a>, or an <a class="inline" href="https://www.w3schools.com/tags/tag_input.asp" target="_blank">input</a> element. Some interesting research can be found <a class="inline" href="https://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use" target="_blank">here</a> and <a class="inline" href="https://css-tricks.com/use-button-element/" target="_blank">here</a>.
	</p>
	<h2>Caution</h2>
  <p>
    CodePen doesn't play nice with certain kinds of links, so <strong>some of the buttons and links below will misbehave</strong> if you try to use them while this page is hosted here. They will behave properly on your computer, though, and should behave properly on the server your code will be hosted on, if any, unless it behaves the same way CodePen does, in which case you'll want to try them all right here (and on the target server) and find the ones that behave as expected.
  </p>
	<h2>View the source code of this page to see how the buttons were created</h2>
	<p>
		When examining the source code of this page, note that some styling was used. The buttons you create may look different from these and you'll want to examine the styling to see why.
	</p>
</section>
<!-- 01 - BUTTONS THAT USE AN EMBEDDED IMAGE -->
<section>
	<!-- anchor -->
	<h2>Anchor that uses an embedded image:</h2>
	<a href="#introduction" id="embedded" role="button" type="button"><img src="data:image/png;base64,R0lGODlhBgAFAIABAAAAAP///yH5BAEAAAEALAAAAAAGAAUAAAIJDGJ4ic1qgAwFADs=" /></a>
	<!-- button -->
	<h2>Button that uses an embedded image:</h2>
	<button onclick="alert('HELLO WORLD')" type="button"><img src="data:image/png;base64,R0lGODlhBgAFAIABAAAAAP///yH5BAEAAAEALAAAAAAGAAUAAAIJDGJ4ic1qgAwFADs=" /></button>
</section>
<!-- 02 - BUTTONS THAT USE A REMOTE IMAGE -->
<section>
	<!-- anchor -->
	<h2>Anchor that uses a remote image:</h2>
	<a class="remote" href="https://openclipart.org/detail/29833/warning-icon" role="button" type="button"><img src="https://openclipart.org/image/45px/svg_to_png/29833/warning.png&disposition=attachment" alt="warning icon" title="warning icon by  matthewgarysmith ( https://openclipart.org/user-detail/matthewgarysmith )" /></a>
	<!-- button -->
	<h2>Button that uses a remote image:</h2>
	<button class="remote" onclick="window.open('https://openclipart.org/detail/29833/warning-icon')" type="button"><img src="https://openclipart.org/image/45px/svg_to_png/29833/warning.png&disposition=attachment" alt="warning icon" title="warning icon by  matthewgarysmith ( https://openclipart.org/user-detail/matthewgarysmith )" /></button>
</section>
<!-- 03 - BUTTONS THAT OPEN A PAGE IN THE CURRENT TAB OR WINDOW -->
<section>
	<!-- anchor -->
	<h2>Anchor that opens a page in the current tab or window:</h2>
	<a href="http://www.google.com" id="anchor-three" role="button" type="button">CLICK</a>
	<!-- button -->
	<h2>Button that opens a page in the current tab or window:</h2>
	<button onclick="window.open('http://www.google.com', '_self')" type="button">CLICK1</a>
	<button onclick="location.href='http://www.google.com'" type="button">CLICK2</button>
	<button onclick="window.location='http://www.google.com'" type="button">CLICK3</button>
	<button onclick="window.location.href='http://www.google.com'" type="button">CLICK4</button>
	<!-- input -->
	<h2>Input that opens a page in the current tab or window:</h2>
	<input onclick="window.open('http://www.google.com', '_self')" type="button" value="CLICK1" />
	<input onclick="location.href='http://www.google.com'" type="button" value="CLICK2" />
	<input onclick="window.location='http://www.google.com'" type="button" value="CLICK3" />
	<input onclick="window.location.href='http://www.google.com'" type="button" value="CLICK4" />
	<script>function example(){window.location = "http://www.google.com";}</script><input onClick="example()" type="button" value="CLICK5">
</section>
<!-- 04 - BUTTONS THAT OPEN A PAGE IN A NEW TAB OR WINDOW -->
<section>
	<!-- anchor -->
	<h2>Anchor that opens a page in a new tab or window:</h2>
	<a href="http://www.google.com" role="button" target="_blank" type="button">CLICK</a>
	<!-- button -->
	<h2>Buttons that open a page in a new tab or window:</h2>
	<button onclick="window.open('http://www.google.com')" type="button">CLICK1</a>
	<button onclick="window.open('http://www.google.com')" type="button">CLICK2</button>
	<button onclick="window.open('http://www.google.com','_blank')" type="button">CLICK3</button>
	<!-- input -->
	<h2>Input that opens a page in a new tab or window:</h2>
	<input onclick="window.open('http://www.google.com')" type="button" value="CLICK" />

</section>
<!-- 05 - BUTTONS THAT OPEN A PAGE IN A NEW TAB OR WINDOW AND RESET THEIR ORIGINATING FORMS TO DEFAULT -->
<section>
	<!-- anchor -->
	<h2>Anchor that opens a page in a new tab or window and resets the values in the form it's in to default:</h2>
	<form action="submit">
		<input id="myinput" type="text">
		<a onclick="window.open('http://www.google.com');document.getElementById('myinput').value='';" role="submit" type="reset" target="_blank">CLICK</a>
	</form>
	<!-- button -->
	<h2>Button that opens a page in a new tab or window and resets the values in the form it's in to default:</h2>
	<form action="submit">
		<input type="text">
		<button onclick="window.open('http://www.google.com','_blank')" type="reset">CLICK</button>
	</form>
	<!-- input -->
	<h2>Input that opens a page in a new tab or window and resets the values in the form it's in to default:</h2>
	<form action="/" method="post">
		<input type="text">
		<input onclick="window.open('http://www.imdb.com','_blank');" type="reset" value="CLICK"/>
	</form>
</section>
<!-- 06 - BUTTONS THAT OPEN MORE THAN ONE PAGE IN NEW TABS OR WINDOWS -->
<section>
	<!-- anchor -->
	<h2>Anchor that opens more than one page in new tabs or windows:</h2>
	<a onclick="window.open('http://www.google.com');window.open('http://www.imdb.com');" role="button" type="button" target="_blank">CLICK</a>
	<!-- button -->
	<h2>Button that opens more than one page in new tabs or windows:</h2>
	<button onclick="window.open('http://www.google.com');window.open('http://www.imdb.com');" type="button">CLICK</button>
	<!-- input -->
	<h2>Input that opens more than one page in new tabs or windows:</h2>
	<input onclick="window.open('http://www.google.com');window.open('http://www.imdb.com');" type="button" value="CLICK" />

</section>
<!-- 07 - BUTTONS THAT CHANGE THEIR OWN TEXT -->
<section>
	<!-- anchor -->
	<h2>Anchor that changes its own text once:</h2>
	<a href="#" onclick="this.innerHTML=new Date().toDateString()" role="button" type="button">CLICK</a>
	<!-- button -->
	<h2>Button that changes its own text once:</h2>
	<button onclick="this.innerHTML=new Date().toDateString()" type="button">CLICK1</button>
	<!-- input -->
	<h2>Input that changes its own text once:</h2>
	<input onclick="this.value=new Date().toDateString()" type="button" value="CLICK2"/>
</section>
<!-- 08 - BUTTONS THAT TOGGLE THEIR OWN TEXT -->
<section>
	<!-- anchor -->
	<h2>Anchor that changes its own text as a toggle:</h2>
	<script>
		function toggleanchortext(button) {
			if(button.innerHTML == "CLICK") {
				button.innerHTML="CLICK AGAIN";
				}
			else {
				button.innerHTML="CLICK";
				}
			}
	</script>
	<a href="#" onclick="toggleanchortext(this)" role="button" type="button">CLICK</a>
	<!-- button -->
	<h2>Button that changes its own text as a toggle:</h2>
	<script>
		function togglebuttontext(button) {
			if(button.innerHTML == "CLICK") {
				button.innerHTML="CLICK AGAIN";
				}
			else {
				button.innerHTML="CLICK";
				}
			}
	</script>
	<button onclick="togglebuttontext(this)" type="button">CLICK</button>
	<!-- input -->
	<h2>Input that changes its own text as a toggle:</h2>
	<script>
		function toggleinputtext(button) {
			if(button.value == "CLICK") {
				button.value="CLICK AGAIN";
				}
			else {
				button.value="CLICK";
				}
			}
	</script>
	<input onclick="toggleinputtext(this)" type="button" value="CLICK"/>
</section>
<!-- 09 - BUTTONS THAT OPEN INTERNAL LINKS -->
<section>
	<!-- anchor -->
	<h2>Anchor that opens an internal link:</h2>
	<a href="#introduction" role="button" type="button">CLICK</a>
	<!-- button -->
	<h2>Button that opens an internal link:</h2>
	<button onclick="location.href='#introduction'" type="button">CLICK</button>
	<!-- input -->
	<h2>Input that opens an internal link:</h2>
	<input onclick="location.href='#introduction'" type="button" value="CLICK"/>
</section>
<!-- 10 - BUTTONS THAT USE A FORM TO OPEN EXTERNAL LINKS IN THE CURRENT TAB OR WINDOW -->
<section>
	<!-- button -->
	<h2>Button in "form as a button" that opens an external link in the current tab or window:</h2>
	<form action="http://www.google.com" target="_self"><button role="submit" type="submit">CLICK</button></form>
	<!-- input -->
	<h2>Input in "form as a button" that opens an external link in the current tab or window:</h2>
	<form action="http://www.google.com" target="_self"><input role="submit" type="submit" value="CLICK1" /></form>
	<form action="http://www.google.com"><input role="submit" target="_self" type="submit" value="CLICK2" /></form>
</section>
<!-- 11 - BUTTONS THAT USE A FORM TO OPEN EXTERNAL LINKS IN A NEW TAB OR WINDOW -->
<section>
	<!-- button -->
	<h2>Button in "form as a button" that opens an external link in a new tab or window:</h2>
	<form action="http://www.google.com" target="_blank"><button role="submit" type="submit">CLICK</button></form>
	<!-- input -->
	<h2>Input in "form as a button" that opens an external link in a new tab or window:</h2>
	<form action="http://www.google.com" target="_blank"><input role="submit" type="submit" value="CLICK" /></form>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Ellyria/a-pen-by-ellyria-PjyWdp */
			a {
				background-color:gainsboro;
				border: 2px outset gainsboro;
				color:black;
				font-size: 80%;
				vertical-align: text-bottom;
				padding:2px;
				text-decoration:none;
				}
			a:hover, button:hover {
				cursor: pointer;
				}
			a#embedded {
				background-color:gainsboro;
				border: 2px outset gainsboro;
				cursor: pointer;
				padding: .15% 1% .5% 1%;
				}
			a.inline {
				background-color: inherit;
				border: none;
				color: blue;
				margin: 0;
				vertical-align: initial;
		padding: none;
		text-decoration: underline;
		}
	a.remote, button.remote{
		background-color:inherit;
		border: none;
		font-size: inherit;
		padding: none;
		text-decoration:none;
		}
	body {
  	background: #D1913C;  /* fallback for old browsers */
  	background: -webkit-linear-gradient(to right, #FFD194, #D1913C);  /* Chrome 10-25, Safari 5.1-6 */
  	background: linear-gradient(to right, #FFD194, #D1913C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
	img.remote {
		width: 5%;
		}
	section {
		background-color: lightgreen;
		border-radius: 10px;
		display: block;
		margin: 1% auto 1% auto;
		padding: 2%;
		width: 80%;
		}
	section#introduction {
		background-color: inherit;
		margin-bottom: 0;
		padding: .15%;
		}

Comments