How to make a 3D style button with css

Gossip less and go directly to the code:

<button class='button'>Button</button>//This is the code in html that displays a button.

//below is the code in css
.button{
    background-color: royalblue;//Set the background to the color of royalblue,
    border: none;//The border is set to none
    border-radius: 5px;//This property is setting rounded corners, four values ​​can be set, four values ​​set clockwise from the upper left corner of the border, of course, less than four values ​​are also possible, if one value is set, the remainder Three values ​​are equal to it. If two values ​​are set, the third value is equal to the first value, and the fourth value is equal to the second value. If three values ​​are set, the fourth value is equal to the second value. The values ​​are equal, and can also be set as follows: horizontal radius/vertical radius, four values ​​can be set in the horizontal radius part, and four values ​​can be set in the vertical radius part. The solution for less than four values ​​is the same as above.
    color: white;//The color is set to white
    padding: 15px 32px;//The padding is set to 15px on the top, 32px on the left, 15px on the bottom, 32px on the right, and set counterclockwise from the top margin, which can be set to four values.
    display: inline-block;//arranged horizontally
    font-size: 16px;//The font size is 16px
    margin: 20px 2px;//The upper margin is 20px, the left is 2px, the bottom is 20px, and the right is 2px
    cursor: pointer;//This is setting up the interaction
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);//Text shadow, this statement includes four attributes: h-shadow v-shadow blur color; respectively: horizontal shadow, vertical shadow, Blur distance shadow color. The first two are mandatory, the last two are optional.
    box-shadow: 0 3px 20px rgba(0,0,0,0.3); This property has 6 values: h-shadow v-shadow blur spread color inset; horizontal shadow, vertical shadow, blur distance, shadow size, shadow Color, change the outer shadow to the inner shadow.
}
//In order to produce the 3d effect, the shadow part needs to be changed, the first color is relatively brighter, and the second shadow becomes blank.
.button:active{//active represents the action, that is, the effect that occurs when the button is clicked
 text-shadow: 0 -1px 0 rgba(0,0,0,.1);//This is changing the shadow color of the text
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;//This is changing the shadow of the border to built-in
  position: relative;//The positioning is relative to the normal position.
  top: 3px;//This is to move the button down by three units, so that it will have the effect of pressing down.
}