上下ライン矢印ボタン
上下に黒ラインのみのシンプルデザイン。ホバーで矢印が拡大
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" class="manual-link"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.arrow-btn {
position: relative;
padding: 10px 40px 10px 10px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Arial', sans-serif;
letter-spacing: 0.05em;
background: transparent;
}
.btn {
color: #333;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
padding-top: 15px;
padding-bottom: 15px;
}
.btn .arrow {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
transition: all 0.3s ease;
}
/* 拡大 */
.btn:hover .arrow {
transform: translateY(-50%) scale(1.3);
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 300px; height: 168.75px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<button class="arrow-btn btn">
<span class="text">BUTTON</span>
<i class="arrow fa-solid fa-right-long"></i>
</button>
</div></body></html>
シンプル黒丸角ボタン
黒い角丸ボタン。ホバーで矢印が右にスライド
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" class="manual-link"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.arrow-btn {
position: relative;
padding: 15px 40px 15px 30px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
font-family: 'Arial', sans-serif;
letter-spacing: 0.05em;
}
.btn {
background: #333;
color: #fff;
border-radius: 50px;
}
.btn .arrow {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
transition: all 0.3s ease;
}
.btn:hover {
background: #555;
}
/* 右にゆっくり移動 */
.btn:hover .arrow {
right: 15px;
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 300px; height: 168.75px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<button class="arrow-btn btn">
<span class="text">BUTTON</span>
<i class="arrow fa-solid fa-arrow-right"></i>
</button>
</div></body></html>
シンプル黒枠ボタン
黒枠のシンプルなボタン。ホバーで矢印が360度回転
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" class="manual-link"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.arrow-btn {
position: relative;
padding: 15px 40px 15px 30px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
font-family: 'Arial', sans-serif;
letter-spacing: 0.05em;
background: #fff;
}
.btn {
color: #333;
border: 2px solid #333;
border-radius: 0;
}
.btn .arrow {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
transition: all 0.3s ease;
}
.btn:hover {
background: #f5f5f5;
}
/* 一回転 */
.btn:hover .arrow {
transform: translateY(-50%) rotate(360deg);
}</style><style id="pic-style">html { max-height: 100%; }</style></head><body id="svg-section" style="width: 300px; height: 168.75px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;"><div class="pic-container">
<button class="arrow-btn btn">
<span class="text">BUTTON</span>
<i class="arrow fa-solid fa-angles-right"></i>
</button>
</div></body></html>
角丸にしたシンプルなCSSフラットボタンデザイン
hover時に「border」プロパティで二重線になるようにしています。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{cursor:pointer;}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.btn-hover-double {
padding: 1rem;
border-radius: 5px;
background-color: #5FC8BC;
color: white;
text-decoration: none;
}
.btn-hover-double:hover {
border: 10px double;
color: white;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 300px; height: 168.75px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<a class="btn-hover-double">CSSボタン</a>
</div>
</body></html>
角丸にしたシンプルなCSSフラットボタンデザイン
hover時に「text-shadow」でテキストにぼかしを入れてます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a{cursor:pointer;}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.btn-hover-blur {
padding: 1rem;
border-radius: 5px;
background-color: #66b2d6;
color: white;
text-decoration: none;
}
.btn-hover-blur:hover {
color: white;
text-shadow: 0 0 5px;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 300px; height: 168.75px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<a class="btn-hover-blur">CSSボタン</a>
</div>
</body></html>
角丸にしたシンプルなCSSボタンデザイン
hover時に「background-color」で背景がピンクになります。
<html lang="ja" style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,
#svg-section {
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body,
svg {
line-height: 1
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
a {
cursor: pointer;
}
</style><style id="root-style">:root {
--pic-image-data: none;
}
</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.btn {
cursor:pointer;
padding: 1rem;
border-radius: 5px;
border: 1px solid #e57bd0;
color: #e57bd0;
text-decoration: none;
transition: .5s;
}
.btn:hover {
background-color: #e57bd0;
color: white;
}
</style><style id="pic-style"></style><style id="body-style">body,
#svg-section {
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', '游ゴシック Medium', YuGothic, YuGothicM, 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo, sans-serif;
}
</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head>
<body style="width: 300px; height: 168.75px; transform-origin: left top; transform: scale(1); overflow: auto;" id="svg-section" class="vsc-initialized"><div class="pic-container">
<a class="btn">CSSボタン</a>
</div>
</body></html>