<div class="main">
<p class="button">테두리</p>
</div>
.main {
margin: 0 auto;
text-align: center;
}
.button {
/* 테투리 css */
border: 10px solid transparent;
transition: box-shadow 0.3s ease-in-out;
/* 기본 css */
display: inline-block;
text-align: center;
padding: 50px 100px;
color: white;
background-color: #00000052;
font-size: 2rem;
font-weight: 600;
position: relative;
}
.button:hover,
.button:focus {
box-shadow: 0 0 0 3px #d27b7b;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.