Inline JavaScript HTML style Ctrl Alt Delete keys

In this example below you will see how to do a Inline JavaScript HTML style Ctrl Alt Delete keys with some HTML / CSS and Javascript

Inline HTML style Ctrl Alt Delete keys. Keys appear responsive on hover.

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

<head>
  <meta charset="UTF-8">
  <title>Inline JavaScript HTML style Ctrl Alt Delete keys</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <kbd class="keyboard-key nowrap" onMouseOver="this.style.boxShadow='0.01em 0.02em 0.02em #000', this.style.cursor='pointer'"
   onMouseOut="this.style.boxShadow='0.18em 0.28em 0.28em #000'" style="border: 1px solid #333; -moz-border-radius: 0.2em; -webkit-border-radius: 0.2em; border-radius: 0.2em; -moz-box-shadow: 0.18em 0.28em 0.28em #000; -webkit-box-shadow: 0.18em 0.28em 0.28em #000; box-shadow: 0.18em 0.28em 0.28em #000; background: #4c4c4c;
background: -moz-linear-gradient(left,  #4c4c4c 0%, #000000 0%, #666666 15%, #595959 19%, #595959 19%, #595959 21%, #d3d3d3 59%, #d3d3d3 80%, #2b2b2b 88%, #3f3f3f 94%, #111111 100%, #131313 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(15%,#666666), color-stop(19%,#595959), color-stop(19%,#595959), color-stop(21%,#595959), color-stop(59%,#d3d3d3), color-stop(80%,#d3d3d3), color-stop(88%,#2b2b2b), color-stop(94%,#3f3f3f), color-stop(100%,#111111), color-stop(100%,#131313));
background: -webkit-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -o-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -ms-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: linear-gradient(to right,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 );
 padding: 0.15em 0.6em; font-family: Arial; font-size: 0.85em;">Ctrl</kbd> + <kbd class="keyboard-key nowrap" onMouseOver="this.style.boxShadow='0.01em 0.02em 0.02em #000', this.style.cursor='pointer'"
   onMouseOut="this.style.boxShadow='0.18em 0.28em 0.28em #000'" style="border: 1px solid #333; -moz-border-radius: 0.2em; -webkit-border-radius: 0.2em; border-radius: 0.2em; -moz-box-shadow: 0.18em 0.28em 0.28em #000; -webkit-box-shadow: 0.18em 0.28em 0.28em #000; box-shadow: 0.18em 0.28em 0.28em #000; background: #4c4c4c;
background: -moz-linear-gradient(left,  #4c4c4c 0%, #000000 0%, #666666 15%, #595959 19%, #595959 19%, #595959 21%, #d3d3d3 59%, #d3d3d3 80%, #2b2b2b 88%, #3f3f3f 94%, #111111 100%, #131313 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(15%,#666666), color-stop(19%,#595959), color-stop(19%,#595959), color-stop(21%,#595959), color-stop(59%,#d3d3d3), color-stop(80%,#d3d3d3), color-stop(88%,#2b2b2b), color-stop(94%,#3f3f3f), color-stop(100%,#111111), color-stop(100%,#131313));
background: -webkit-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -o-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -ms-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: linear-gradient(to right,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 );
 padding: 0.15em 0.6em; font-family: Arial; font-size: 0.85em;"> Alt</kbd> + <kbd class="keyboard-key nowrap" onMouseOver="this.style.boxShadow='0.01em 0.02em 0.02em #000', this.style.cursor='pointer'"
   onMouseOut="this.style.boxShadow='0.18em 0.28em 0.28em #000'" style="border: 1px solid #333; -moz-border-radius: 0.2em; -webkit-border-radius: 0.2em; border-radius: 0.2em; -moz-box-shadow: 0.18em 0.28em 0.28em #000; -webkit-box-shadow: 0.18em 0.28em 0.28em #000; box-shadow: 0.18em 0.28em 0.28em #000; background: #4c4c4c;
background: -moz-linear-gradient(left,  #4c4c4c 0%, #000000 0%, #666666 15%, #595959 19%, #595959 19%, #595959 21%, #d3d3d3 59%, #d3d3d3 80%, #2b2b2b 88%, #3f3f3f 94%, #111111 100%, #131313 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(15%,#666666), color-stop(19%,#595959), color-stop(19%,#595959), color-stop(21%,#595959), color-stop(59%,#d3d3d3), color-stop(80%,#d3d3d3), color-stop(88%,#2b2b2b), color-stop(94%,#3f3f3f), color-stop(100%,#111111), color-stop(100%,#131313));
background: -webkit-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -o-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: -ms-linear-gradient(left,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
background: linear-gradient(to right,  #4c4c4c 0%,#000000 0%,#666666 15%,#595959 19%,#595959 19%,#595959 21%,#d3d3d3 59%,#d3d3d3 80%,#2b2b2b 88%,#3f3f3f 94%,#111111 100%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=1 );
 padding: 0.15em 0.25em; font-family: Arial; font-size: 0.85em;"> Delete</kbd>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/321/inline-javascript-html-style-ctrl-alt-delete-keys-qgnBj */
body {
  text-align: center;
  margin: auto;
  margin-top: 10%;
}

Comments

More from 321

A Pen by Ethan Marshall

A Pen by Ethan Marshall

By 321
A Pen by Ethan Marshall

A Pen by Ethan Marshall

By 321
A Pen by Ethan Marshall

A Pen by Ethan Marshall

By 321
A Pen by Ethan Marshall

A Pen by Ethan Marshall

By 321

You Might Also Like

Composition avec rouge, jaune, bleu et noir

Composition avec rouge, jaune, bleu et noir

By ainalem
A Pen by rodolpheb

A Pen by rodolpheb

By rodolpheb
CRE Notify updates - V1

CRE Notify updates - V1

By eoneill
Snack Jacks - 24/7 snacks delivery @ Narva 27, Tartu

Snack Jacks - 24/7 snacks delivery @ Narva 27, Tartu

By SnackJacks
&#x5370;&#x5237;&#x8853;

印刷術

By CAIJIN
A Pen by SoraRiku

A Pen by SoraRiku

By SoraRiku
Challenge

Challenge

By TaraKreft
webp

webp

By Jenn
© 2018 - Copyright CodeSeek.co
contact email