.select { float: left; width: 160px; height: 24px; margin: 15px 0px 0px 5px; border-radius: 20px;
font: 16px arial; font-style: normal; font-weight: bold; text-align: center;
line-height: 24px;   /* Centers vertically */
color: #ecd8b8;   /* Champagne */
background-image: -webkit-linear-gradient(80deg, #008080, #000000, #008080);
box-shadow: 0px 0px 2px 2px #000000 inset;   /* Adds thin black line just inside frame */
border: 4px outset #ff9d80;   /* OUTSET makes the button 'pop out' */
}
.select:hover { border: 4px inset #40b5ad; color: #000000; background: #ecd8b8; }

The copper strip (shown above) is created using SVG, captured in a screenshot, trimmed, color adjusted, and finally saved as a PNG image.
The Title Display is coded to be properly aligned on top of the copper strip.

.rail { width: 960px; height: 20px;
background-image:url('filename.png');
border-top: 2px solid #ff9675;
border-bottom: 2px solid #ff9675;
}

.paris {
width: fit-content; height: 24px; color: #ff9a80;
font-size: 24px;line-height: 24px; font-weight: bold;
border-radius: 10px; background-size: 100%;
margin: 0 auto; margin-top: -34px;
border-style: inset; border-width: 6px; border-color: #ff9675;
box-shadow: 0px 0px 2px 2px #000000 inset;
background-image: -webkit-linear-gradient(100deg, #008080, #000000, #008080);
padding: 2px 10px 4px 10px;
text-shadow: 1px 1px #000000, 2px 2px #40a0a0;
-webkit-filter: drop-shadow(0px 0px 10px #000000);
}

<div class="rail"></div>
<div class="paris">Title Text</div>

The copper gears are created using SVG, captured in a screenshot, trimmed, color adjusted, and finally saved as a PNG image.

.spin_ccw {
animation: rotation1 12s infinite linear;
float: left; width: 70px; height: 70px;
background-image: url('gearname.png');
background-size: 100%;
-webkit-filter: drop-shadow(2px 2px 5px #000000);
}

.spin_cw {
animation: rotation2 12s infinite linear;
float: left; width: 70px; height: 70px;
background-image: url('gearname.png');
background-size: 100%;
-webkit-filter: drop-shadow(2px 2px 5px #000000);
}

@keyframes rotation1 {
from { transform: rotate(360deg); } to { transform: rotate(0deg); }
}

@keyframes rotation2 {
from { transform: rotate(7deg); } to { transform: rotate(367deg); }
}

class="spin_cw"	ClockWise spin at 12 seconds ⁄ rev
class="spin_cw_fast"	ClockWise spin at 5 seconds ⁄ rev
class="spin_ccw"	Counter ClockWise spin at 12 seconds ⁄ rev
class="spin_ccw_fast"	Counter ClockWise spin at 5 seconds ⁄ rev

⬇ &#11015;     &#10145; ➡

⬇ copperlink ➡

.copperlink { color: #ff9d80; text-decoration: underline; text-decoration-color: #00cccc; }
.copperlink:hover { color: #ecd8b8; text-decoration-color: #ff0000; }