Engraved HTML Buttons With CSS

In this tutorial we will see how to make Engraved HTML Buttons With CSS. Simple CSS is used for this purpose, HTML code and CSS code is given.

Table of Contents

• HTML Code
• CSS Code
• Demo
• Video Tutorial
• More CSS Tutorials

HTML Code

HTML Code is given below.

<button class="buttons">Engraved</button>    
<button class="buttons">Buttons</button>    
<button class="buttons">With</button>    
<button class="buttons">CSS</button>  

CSS Code

CSS Code is given below.

<style>
:root
{
    --blue: #279AE2;
    --lightBlue: #2CA6F2;
    --darkBlue: #1B82C2;
}
body
{
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--blue);
}
.buttons
{
    font-family: 'Barlow Condensed',sans-serif;
    background-color: var(--blue);
    outline: none;
    cursor: pointer;
    color: #111;
    padding: 15px 40px;
    font-size: 20px;
    margin: 0px 5px;
    font-weight: bold;
    box-shadow: inset 0px 0px 10px 2px var(--darkBlue);
    border: 1px solid var(--lightBlue);
}
.buttons:hover
{
    box-shadow: 0px 0px 5px 0px var(--darkBlue);
    border: 1px solid var(--darkBlue);
}
</style>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Engraved HTML Buttons With CSS.