用二個DIV做出立體按鈕

 <div class="gradO parent" onclick="myFunction()">

    <div class="gradI parent">

        <div id="demo" style="width:100%;

            /*border:1px solid gray;*/

            word-break: break-all;

            text-align:center;

            padding:4px;

            color:white;

            font:20px arial;

            text-shadow: 2px 2px 4px #000000;">查詢</div>

    </div>

</div>

<style>

.gradO {

    /* border:1px solid gray;*/

    width:72px;

    height:72px;

    padding: 8px;

    border-radius:50%;

    background-image: linear-gradient(45deg, rgb(255,0,0), rgb(255,182,193));

}

.gradO:hover {

  box-shadow: 5px 10px 18px #d5d5d5;

 }

.parent {

  display: flex;

  justify-content: center;    

  align-content: center;      

  flex-wrap: wrap;

  cursor:default;

}

.parent:hover {

    cursor:pointer;

 }

.gradI {

    padding: 6px;

    width:56px;

    height:56px;

    border-radius:50%;

    background-image: linear-gradient(45deg, rgb(255,182,193), rgb(255,0,0));

}

</style>

省略 myFunction