第一張是我現在的，要變成跟第二張一樣的按鈕
有一定要用javascript做嗎

    body {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        /*position: relative;*/
    }

    header {
        background-color: rgb(162, 220, 243);
        height: 150px;
        position: relative;
    }

    header img {
        border: #369;
        width: 100px;
        height: 100px;
    }

    header .dropdown{
        /*background-color: rgb(242, 255 ,0);*/
        right: -750px;
        bottom: -100px;
    }

    /*header nav a{
            background-color: darkblue;
            color: #fff;
            font-size: 18px;
            letter-spacing: 1px;
            padding: 10px 20px;
            display: block;
            float: left;
            text-decoration: none;
            border-radius: 8px 8px 0 0;
            border: 1px solid red;
            margin: 0 3px;
            margin-top: 20px; 
        }*/

        header .dropdown-content a {
        background-color: white;
        color: black;
        font-size: 12px;
        letter-spacing: 2px;
        padding: 10px 12px;
        border-radius: 8px 8px 0 0;
        margin-left: 5px;
        transition: .2s;
    }
   
    header .dropdown-content a:hover{
        padding-bottom: 30px;
    }

    body>nav {
        background-color: #369;
        color: #fff;
        height: 60px;
        position: sticky;
        top: 0;
    }

    main {
        background-color: #e1b8f3;
        min-height: 200px;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }

    main aside {
        background-color: #ffd6d6;
        float: right;
        width: 20%;
        padding: 20px;
        margin-left: 555px;
    }

    .content {
        background-color: #f8fc9e;
        width: 70%;
        padding: 20px;
        margin: 4%;
    }

    .content img {
        display: block;
        margin-bottom: 20px;
    }

    .content h1 {
        font-size: 2em;
        margin: 0 0 20px;
        margin-top: 20px;
    }

    .content figure {
        letter-spacing: 1px;
        line-height: 1.5;
        text-align: justify;
        margin-top: 3px;
    }

    .gomore {
        background-color:white;
        color: black;
        padding: 10px;
        border: none;
    }

    footer {
        background-color: #d5f3b8;
        text-align: center;
        padding: 1em;
    }

    img {
        width: 30%;
        height: 300px;
        margin-top: auto;
        margin-bottom: auto;
        float: left;
        margin: 20px;
    }

     /* 按鈕樣式 */
     .dropbtn {
        background-color: white;
        color: black;
        padding: 10px;
        border: none;
    }

    /* 下拉菜單容器 */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* 下拉菜單內容（隱藏起來） */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    /* 下拉菜單內容中的選項 */
    .dropdown-content a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 滑鼠懸停時，顯示下拉菜單內容 */
    .dropdown:hover .dropdown-content {
        display: block;
    }

</style>

<main>
    <div class="content">
        <img src="./images/01.jpg" alt="./images/01.jpg">
        <h1>BAS建築自動化系統</h1>
        <figure>介紹內容 Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Velit ut fugiat neque. Dolorum voluptatum eum voluptas facere doloribus aliquam, illum officia
            aspernatur, ipsam, sit ducimus molestiae sunt dignissimos.
            Necessitatibus, nihil.
        </figure>
        <aside><a href=""><span class="btn">ITsESG</span><span>手冊下載</span></a></aside>
    </div>
</main>

<footer>
    <p>Copyright © 2023 ITsESG</p>
</footer>