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

domainSuffixes

domainSuffixes

By artbels
Tic Tac Toe

Tic Tac Toe

By LindseyMaddox
Hello

Hello

By bryanbraun
&#x422;&#x430;&#x431;&#x43B;&#x438;&#x446;&#x44B;

Таблицы

By EvgenStor
Nuevo Usuario

Nuevo Usuario

By jgcm3000
A Pen by Li Kai

A Pen by Li Kai

By likai
Random 8Bit Lawn

Random 8Bit Lawn

By nikname
Weather App w/ DarkSky

Weather App w/ DarkSky

By shayna
© 2018 - Copyright CodeSeek.co
contact email