当前位置：网站首页>A three-dimensional button

A three-dimensional button

2022-07-05 05:03:00 【Fierce chicken】

A three-dimensional button

Change button button Default style for , Create a stereo button

Final effect

This effect is achieved by box-shadow Realization

Pay attention here box-shadow It allows multiple shadows to be set on the same element , Need to be separated by commas ;
The stacking order of multiple shadows is ： The shadow written in front will cover the shadow written in the back

Demo link

CodePen Demo link ：https://codepen.io/Zhao-Bocheng/pen/zYwrPEL

Source code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Stereo buttons </title>
    <style> * {
      padding: 0; margin: 0; } body {
      display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f1f1f1; } button {
      font-family: Helvetica, sans-serif; border: 0; background-color: white; width: 100px; height: 100px; border-radius: 20px; /*  The key is to use only this   Box shadow   The style of  */ box-shadow: -6px 6px 8px inset rgba(255, 255, 255, .6), 6px -6px 8px inset rgba(0, 0, 0, .2); } button:active {
      box-shadow: -6px 6px 8px inset rgba(0, 0, 0, .2), 6px -6px 8px inset rgba(255, 255, 255, .6); } </style>
</head>
<body>
    <button>Btn</button>
</body>
</html>