가장 마지막 부분 hover옵션을 적용하였으나 크롬에선 효과가 나타나지 않고 IE에서는 정상적으로 작동하였습니다.

강력 새로고침 및 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

코드를 추가하여 보았지만 크롬에선 개선되지 않습니다..ㅠㅠ

어디가 문제일까요..

    <style>
        
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }


        .mytitle {
            background-color: green;


            height: 250px;
            perspective: 100%;


           
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;


            color: white;


         
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }


        .mytitle>button {
            width: 200px;
            height: 50px;


           
            background-color: transparent;
            color: white;


            border-radius: 50px;


            
            border: 1px solid white;


            margin-top: 10px;
        }


        /* hover : 마우스를 올렸을 때 */
        .mytitle>button:hover {
            border: 2px solid white;
        }
    </style>