<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>@charset "utf-8";
/*角丸に変わる*/
.btnchangeradius {
display: inline-block;
margin: 20px 0;
text-decoration: none;
outline: none;
font-size: max(14px, 2vw);
white-space: nowrap;
width: max(150px, 40vw);
background: #333;
color: #fff;
padding: 10px 20px;
border: 5px double white;
/*アニメーションの指定*/
transition: 0.3s ease-out;
}
/*hoverした際の角丸のアニメーション*/
.btnchangeradius:hover {
background: #666;
border-radius: 50px;
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
padding: 30px 0;
text-align: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: linear-gradient(
103.3deg,
rgba(252, 225, 208, 1) 30%,
rgba(255, 173, 214, 1) 55.7%,
rgba(162, 186, 245, 1) 81.8%
);
}
/*ボタンの配置*/
.btn-position {
display: flex;
flex-direction: column;
align-items: center;
}
p {
margin: 0 0 10px 0;
}</style>
</head>
<body>
<body>
<div class="btn-position">
<a href="#" class="btnchangeradius">角丸に変わる</a>
</div>
<script>
</script>
</body>
</html>