Examples of Skeuomorphic Buttons
Example 1: Example showing ON/OFF button with Skeuomorphic Design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skeuomorphism</title>
</head>
<body>
<div class="container">
<div style="text-align: center; margin: auto;">
<h1 style="color: green;">w3wiki</h1>
<h3>Skeuomorphic Button</h3>
</div >
<div class="buttons">
<div id="onBtn"
onclick="getElementById('onBtn').style.backgroundColor = 'green';
getElementById('offBtn').style.backgroundColor = 'black'">
ON</div>
<div id="offBtn"
onclick="getElementById('offBtn').style.backgroundColor = 'red';
getElementById('onBtn').style.backgroundColor = 'black'">
OFF</div>
</div>
</div>
</body>
</html>
.container {
box-shadow: inset -2px 4px 8px gray;
border-radius: 1em;
height: 250px;
width: 40em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: whitesmoke;
}
.buttons {
height: 120px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#onBtn {
width: 15%;
height: 50%;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
transition: 0.4s;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
box-shadow: inset 0.9em 0 0.9em black;
}
#offBtn {
width: 15%;
height: 50%;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
transition: 0.4s;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
box-shadow: inset -0.9em 0 0.9em black;
}
#onBtn:hover {
background-color: rgb(110, 141, 102);
}
#offBtn:hover {
background-color: rgb(129, 93, 93);
}
Output:
Example 2: Example showing Skeuomorphic Icons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Skeuomorphic Buttons</title>
<style>
</style>
</head>
<body>
<h1 style="color: green; margin-top: 50px;">
w3wiki</h1>
<h3>Skeuomorphic Buttons</h3>
<div class="container">
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231211172508/home.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231212111249/document.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231211172019/menu.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231211172520/magnifying-glass.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231211172531/contact.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231213162349/time.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231213162349/calendar.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231213162350/sticky-notes.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231213162352/music.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231213162353/grocery-store.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231213162351/image.png">
</div>
<div class="buttons">
<img class="icons" src=
"https://media.w3wiki.org/wp-content/uploads/20231213162354/settings.png">
</div>
</div>
</body>
</html>
*{
text-align: center;
margin: auto;
}
.container{
width: 20em;
height: 30em;
border: 1px solid black;
display: flex;
justify-content: space-around;
align-items: center;
background-color: blueviolet;
border-radius: 20px;
flex-wrap: wrap;
margin-top: 40px;
}
.icons{
height: 60%;
width: 60%;
}
.buttons{
width: 4em;
height: 4em;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: white;
transition: 0.4s;
margin: 15px;
box-shadow: inset -0.1em 0 0.3em black;
}
.buttons:hover{
transform: scale(1.2);
}
Output: