CSS Button #12 - Code Example

Demo

2.61 KB
HTML, CSS
Button
submit
MIT License

Code
Editor

HTML

<a class="btn-old-pc" data-title="Submit">Submit</a>

CSS

.btn-old-pc {
    font-family: Arial;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #080808;
    color: #6b778400;
    text-align: center;
    position: relative;
    width: 120px;
    height: 60px;
    text-decoration: none;
    padding: 10px 20px;
    -webkit-box-shadow: 0px -2px 2px 4px #0d0e0d, 2px 2px 2px 2px #292c2a, 2px -2px 2px 2px #222423, -2px 2px 2px 2px #2b3230;
    -moz-box-shadow: 0px -2px 2px 4px #0d0e0d, 2px 2px 2px 2px #292c2a, 2px -2px 2px 2px #222423, -2px 2px 2px 2px #2b3230;
    box-shadow: 0px -2px 2px 4px #0d0e0d, 2px 2px 2px 2px #292c2a, 2px -2px 2px 2px #222423, -2px 2px 2px 2px #2b3230;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 1;
    font-size: 1em;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
    cursor: pointer;
}
.btn-old-pc::after {
    content: attr(data-title);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 2.6em;
    display: block;
    position: absolute;
    z-index: -1;
    background-color: #2a3c44;
    color: #495f64;
    text-shadow: 0px 2px 1px #1a2b2c;
    font-weight: bold;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 5px solid #3e5156;
    border-left: 8px solid #213234;
    border-right: 8px solid #3c3836;
    border-bottom: 12px solid #101b1c;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    opacity: 1;
    -webkit-box-shadow: inset 10px -5px 14px #293e44, inset -10px -7px 22px #443f3d;
    -moz-box-shadow: inset 10px -5px 14px #293e44, inset -10px -7px 22px #443f3d;
    box-shadow: inset 10px -5px 14px #293e44, inset -10px -7px 22px #443f3d;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    transition: 0.2s;
}
.btn-old-pc:hover::after {
    opacity: 1;
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    -o-transform: scale(0.97);
    transform: scale(0.97);
    border-top: 8px solid #26363a;
    border-bottom: 9px solid #101b1c;
    border-right: 8px solid #2b2725;
    background-color: #1d323b;
    color: #35494e;
    -webkit-box-shadow: inset 10px 16px 14px #1c1f2066, inset -10px 13px 22px #3a373566;
    -moz-box-shadow: inset 10px 16px 14px #1c1f2066, inset -10px 13px 22px #3a373566;
    box-shadow: inset 10px 16px 14px #1c1f2066, inset -10px 13px 22px #3a373566;
}

HTML
CSS

The code snippet we’re looking at is a cool mix of HTML and CSS that brings a submit button to life, with a vintage twist. Picture this: a button that not only serves its purpose but also throws in a dash of nostalgia with its “old PC” theme. It’s like turning a simple click into a tiny time travel.

Starting with the HTML part, there’s a link element styled as a button. This isn’t your everyday button; it’s styled with a class named “btn-old-pc” and carries a data attribute, data-title, with the value “Submit”. This clever setup allows the button’s appearance and label to be dynamically influenced by CSS, making the button not just interactive but also integrative with its content.

Diving into the CSS, it’s where the magic happens. The .btn-old-pc class applies a bunch of styles to mimic the look of an old PC button. It has a dark background, shadow effects to give it depth, and a text color that’s reminiscent of the old green-on-black monitors. There’s also a pseudo-element ::after that uses the data-title attribute to display the “Submit” text in a style that screams retro computing. This text even changes its appearance on hover, giving a satisfying feedback that’s both visual and nostalgic.

In essence, this setup combines form and function with a dash of nostalgia, turning a simple submit button into a small interactive piece of art that could make any form submission feel like a throwback to the early days of computing.