こんにちは。ささめまです。
線との組み合わせボタンがやっぱりなんとなく好きで、
また使いたいので作り方の備忘録です。
＼ コピペでそのまま使えます ／
demo
html
<a href="#" class="button_link">button</a>css
.button_link {
width: 280px;
height: 60px;
color: #353535;
text-align: center;
text-decoration: none;
font-weight: 600;
line-height: 60px;
background-color: #bdefea;
border-radius: 50vh;
display: block;
position: relative;
transition: 0.3s;
}
.button_link::before {
content: '';
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50vh;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.button_link::after {
content: '';
width: 7px;
height: 7px;
border-top: 3px solid #353535;
border-right: 3px solid #353535;
position: absolute;
top: 50%;
right: 27px;
transform: translateY(-50%) rotate(45deg);
}
.button_link:hover {
background-color: #81d8d0;
}design
右端に「 > 」とか「→」がつくボタン、よくあるデザインだけど
正直ちょっとめんどくさいなと思っていたので
こういうシンプルめの記述で再現できるようになったのは
とっっっっってもありがたいです！
::after要素のwidthとheightでくの字矢印の長さを、border-topとborder-rightで太さを変えられます。大きさ自由自在☆
マークアップ言語を覚えたての2014年頃、
ボタンの箱の中に文字+矢印のデザインが大流行。
font-awsomeの矢印達とはマブダチでした。
(font-awsomeの矢印をfloatかpositionで配置するやつ)
それがfont-awsomeから矢印引っ張らなくてよくなって
floatもいらない！positionは使うけど！cssだけで簡単！
便利になって感激です。
もう矢印ボタンは怖くない。
リクエストされてもニコニコで受け付けます^^
ではでは。
