Skip to content

Instantly share code, notes, and snippets.

@kobitoDevelopment

kobitoDevelopment/html

Last active April 1, 2024 04:51
Show Gist options
  • Save kobitoDevelopment/bcfe4bb6ee88040e0295cecdbc9958cc to your computer and use it in GitHub Desktop.
Save kobitoDevelopment/bcfe4bb6ee88040e0295cecdbc9958cc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html
<a href="#" class="btn-corner">ボタン</a>
Raw
scss
$x-gradient: linear-gradient(90deg, #52a5e7 0 3px, transparent 0 calc(100% - 3px), #52a5e7 calc(100% - 3px));
$y-gradient: linear-gradient(#52a5e7 0 3px, transparent 0 calc(100% - 3px), #52a5e7 calc(100% - 3px));
$x-gradient-set: linear-gradient(90deg, #52a5e7 0 3px, transparent 0 calc(100% - 3px), #52a5e7 calc(100% - 3px));
$y-gradient-set: linear-gradient(#52a5e7 0 3px, transparent 0 calc(100% - 3px), #52a5e7 calc(100% - 3px));
.btn-corner {
padding: 10px 30px;
display: inline-block;
background-image: $x-gradient, $y-gradient, $x-gradient, $y-gradient;
background-repeat: no-repeat;
background-size: 100% 50%, 51% 100%, 100% 50%, 51% 100%;
background-position: top, right, bottom, left;
color: #52a5e7;
transition: 0.4s;
&:hover {
background-image: $x-gradient-set, $y-gradient-set, $x-gradient-set, $y-gradient-set;
background-size: 100% 10px, 10px 100%, 100% 10px, 10px 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment