page ボタン

最終更新：2022/05/02

特殊ボタン

上下左右中央にアイコンとテキストボタン

「div.sun_like_btn>div.slh1_btn+slh_h2_btn」で作ってください。
今回はリストではなくrowで括ることを想定して作りました。
「slh1_btn」がアイコン、「slh2_btn」がテキスト用です。

html

	<div class="row">
		<div class="col-12 m20-bottom">
		  <div class="sun_like_btn">
				<a href="">
				<div class="slh1_btn"><div class="slf_btn_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2_btn">
					<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>
					<p>「div.sun_like_btn&gt;div.slh1_btn+slh_h2_btn」で作ってください。<br>今回はリストではなくrowで括ることを想定して作りました。<br>「slh1_btn」がアイコン、「slh2_btn」がテキスト用です。</p>
					<div class="slf_btn_txt"><i class="fas fa-bars"></i>READ MORE</div>
				</div>
				</a>
			</div>
		</div>
	</div>

<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン</h2>

<p>「div.sun_like_btn>div.slh1_btn+slh_h2_btn」で作ってください。<br>今回はリストではなくrowで括ることを想定して作りました。<br>「slh1_btn」がアイコン、「slh2_btn」がテキスト用です。</p>

</div>

</a>

</div>

css

.sun_like_btn {
  width: 100%;
}
.sun_like_btn a {
  background-color: #fff;
  border: 2px #000 solid;
  padding: 0 5% 5% 5%;
  width: 100%;
  color: #000;
  transition: .3s;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  display: flex;
}
.sun_like_btn a:hover {
  text-decoration: none;
  background-color: #000;
  color: #fff;
}
.slh1_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  width: 100%;
}
.slf_btn_icon {
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  transition: .3s;
}
.sun_like_btn a:hover .slf_btn_icon {
  background-color: #fff;
  color: #000;
}
.slh2_btn {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
h2.slh_h2_btn {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1.2rem;
}
.slf_btn_txt {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px #aaa solid;
  text-align: right;
  font-weight: bold;
}
.slf_btn_txt i {
  padding-right: 0.5rem;
}
@media screen and (min-width: 768px) {
  .sun_like_btn a {
    padding: 5% 5% 5% 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
  }
  .slh1_btn {
    width: auto;
    min-width: 150px;
    min-height: auto;
  }
  .slf_btn_icon {
    width: 70px;
    height: 70px;
    font-size: 2.4rem;
  }
  .slh2_btn {
    width: auto;
  }
  .slh2_btn p:last-child {
    margin-bottom: 0;
  }
  h2.slh_h_btn2 {
    font-size: 1.6rem;
    font-weight: bold;
  }
}
@media screen and (min-width: 1200px) {
  .sun_like_btn a {
    padding: 2rem 5% 2rem 0;
  }
}

.sun_like_btn {

width: 100%;

}

.sun_like_btn a {

background-color: #fff;

border: 2px #000 solid;

padding: 0 5% 5% 5%;

width: 100%;

color: #000;

transition: .3s;

flex-direction: column;

flex-wrap: wrap;

height: 100%;

display: flex;

}

.sun_like_btn a:hover {

text-decoration: none;

background-color: #000;

color: #fff;

}

.slh1_btn {

display: flex;

justify-content: center;

align-items: center;

min-height: 100px;

width: 100%;

}

.slf_btn_icon {

width: 55px;

height: 55px;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.8rem;

background-color: #000;

color: #fff;

border-radius: 50%;

transition: .3s;

}

.sun_like_btn a:hover .slf_btn_icon {

background-color: #fff;

color: #000;

}

.slh2_btn {

flex-grow: 1;

display: flex;

flex-direction: column;

width: 100%;

}

h2.slh_h2_btn {

font-size: 1.2rem;

font-weight: bold;

margin-bottom: 1.2rem;

}

.slf_btn_txt {

padding-top: 1rem;

margin-top: 1rem;

border-top: 1px #aaa solid;

text-align: right;

font-weight: bold;

}

.slf_btn_txt i {

padding-right: 0.5rem;

}

@media screen and (min-width: 768px) {

.sun_like_btn a {

padding: 5% 5% 5% 0;

display: flex;

flex-wrap: nowrap;

flex-direction: row;

}

.slh1_btn {

width: auto;

min-width: 150px;

min-height: auto;

}

.slf_btn_icon {

width: 70px;

height: 70px;

font-size: 2.4rem;

}

.slh2_btn {

width: auto;

}

.slh2_btn p:last-child {

margin-bottom: 0;

}

h2.slh_h_btn2 {

font-size: 1.6rem;

font-weight: bold;

}

@media screen and (min-width: 1200px) {

.sun_like_btn a {

padding: 2rem 5% 2rem 0;

}

上下左右中央にアイコンとテキストボタン横並び

左右のテキスト量が違うとき
何もしていないと「p」タグと「slf_btn_txt」の間が空いてしまいちょっとカッコ悪いので
「slh2_btn」の直下に「div.flex-grow-1」を入れてください。「slf_btn_txt」は「div.flex-grow-1」の兄弟要素にしてください。
※「flex-grow-1」はbootstrapに搭載されているクラスです。「flex-grow」はflexboxの中の余っている領域をどの要素でどのくらいの配分で埋めるかを指定できます。

上下左右中央にアイコンとテキストボタン横並び

高さが揃わない場合、「h-100」を「col」直下の「sun_like_btn」につけてください。
その場合、「col」の直下の子要素は「sun_like_btn」のみにしてください。

    <div class="row">
  <div class="col-6">
	  <div class="sun_like_btn">
				<a href="">
				<div class="slh1_btn"><div class="slf_btn_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2_btn">
				    <h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン横並び</h2>
				    <p>左右のテキスト量が違うとき<br>何もしていないと「p」タグと「slf_btn_txt」の間が空いてしまいちょっとカッコ悪いので<br>「slh2_btn」の直下に「div.flex-grow-1」を入れてください。「slf_btn_txt」は「div.flex-grow-1」の兄弟要素にしてください。<br>※「flex-grow-1」はbootstrapに搭載されているクラスです。「flex-grow」はflexboxの中の余っている領域をどの要素でどのくらいの配分で埋めるかを指定できます。</p>
					<div class="slf_btn_txt"><i class="fas fa-bars"></i>READ MORE</div>
				</div>
				</a>
			</div>
  </div>
      <div class="col-6">
		<div class="sun_like_btn h-100">
				<a href="">
				<div class="slh1_btn"><div class="slf_btn_icon"><i class="fas fa-home"></i></div></div>
				<div class="slh2_btn">
				  <div class="flex-grow-1">
				    <h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン横並び</h2>
				    <p>高さが揃わない場合、「h-100」を「col」直下の「sun_like_btn」につけてください。<br>その場合、「col」の直下の子要素は「sun_like_btn」のみにしてください。</p>
			      </div>
					<div class="slf_btn_txt"><i class="fas fa-bars"></i>READ MORE</div>
				</div>
				</a>
			</div>
      </div>
    </div>

<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン横並び</h2>

<p>左右のテキスト量が違うとき<br>何もしていないと「p」タグと「slf_btn_txt」の間が空いてしまいちょっとカッコ悪いので<br>「slh2_btn」の直下に「div.flex-grow-1」を入れてください。「slf_btn_txt」は「div.flex-grow-1」の兄弟要素にしてください。<br>※「flex-grow-1」はbootstrapに搭載されているクラスです。「flex-grow」はflexboxの中の余っている領域をどの要素でどのくらいの配分で埋めるかを指定できます。</p>

</div>

</a>

</div>

<h2 class="slh_h2_btn">上下左右中央にアイコンとテキストボタン横並び</h2>

<p>高さが揃わない場合、「h-100」を「col」直下の「sun_like_btn」につけてください。<br>その場合、「col」の直下の子要素は「sun_like_btn」のみにしてください。</p>

</div>

</div>

</a>

</div>

サンホームさん持ってきたやつ

サンホームさんで作ったやつをクラス名だけ変えてそのまま持ってきたやつです。
サンホームさん以外で使うことは特に想定していなかったのでちょっと使いづらいかもしれません。

html

<div class="sun_list">
	  <ul>
		<li>
		  <a href="">
			<div class="sunli_no">
			  <div><span>01<span>point</span></span></div>
			  </div>
			<div class="sunli_con">
			  <div>
				<h3><span>【Kids Design】</span>キッズデザイン</h3>
				<p>「キッズデザインの家」、それは子供目線の追及から生まれた家。</p>
			  </div>
			  <div class="bt_li_con"><i class="fas fa-bars"></i>READ MORE</div>
			</div>
			</a>
		  </li>
		  
		<li>
		  <a href="">
			<div class="sunli_no">
			  <div><span>02<span>point</span></span></div>
			  </div>
			<div class="sunli_con">
			  <div>
				<h3><span>【Durability】</span>耐震性・耐久性</h3>
				<p>構造基準を高い水準で定めています。</p>
			  </div>
			  <div class="bt_li_con"><i class="fas fa-bars"></i>READ MORE</div>
			</div>
			</a>
		  </li>
		<li>
		  <a href="">
			<div class="sunli_no">
			  <div><span>03<span>point</span></span></div>
			  </div>
			<div class="sunli_con">
			  <div>
				<h3><span>【Land Hunt】</span>土地探し</h3>
				<p>土地探しのお手伝いもいたしますので、どうぞお気軽にご相談ください。</p>
			  </div>
			  <div class="bt_li_con"><i class="fas fa-bars"></i>READ MORE</div>
			</div>
			</a>
		  </li>
		<li>
		  <a href="">
			<div class="sunli_no">
			  <div><span>04<span>point</span></span></div>
			  </div>
			<div class="sunli_con">
			  <div>
				<h3><span>【Housework】</span>家事ラク</h3>
				<p>家族や仲間との団らんも楽しめる暮らしをご提案します。</p>
			  </div>
			  <div class="bt_li_con"><i class="fas fa-bars"></i>READ MORE</div>
			</div>
			</a>
		  </li>
		<li>
		  <a href="">
			<div class="sunli_no">
			  <div><span>05<span>point</span></span></div>
			  </div>
			<div class="sunli_con">
			  <div>
				<h3><span>【Energy Saving】</span>省エネ</h3>
				<p>光・水・熱をコントロールして、効率よく無駄をなくす工夫。</p>
			  </div>
			  <div class="bt_li_con"><i class="fas fa-bars"></i>READ MORE</div>
			</div>
			</a>
		  </li>
		<li>
		  <a href="">
			<div class="sunli_no">
			  <div><span>06<span>point</span></span></div>
			  </div>
			<div class="sunli_con">
			  <div>
				<h3><span>【Reform】</span>リフォーム</h3>
				<p>お客様をはじめ、接する皆さんとは常に『笑顔で』をモットーに。</p>
			  </div>
			  <div class="bt_li_con"><i class="fas fa-bars"></i>READ MORE</div>
			</div>
			</a>
		  </li>
	  </ul>
    </div>

<ul>

<li>

<div><span>01<span>point</span></span></div>

</div>

<div>

<h3><span>【Kids Design】</span>キッズデザイン</h3>

<p>「キッズデザインの家」、それは子供目線の追及から生まれた家。</p>

</div>

</div>

</a>

</li>

<li>

<div><span>02<span>point</span></span></div>

</div>

<div>

<h3><span>【Durability】</span>耐震性・耐久性</h3>

<p>構造基準を高い水準で定めています。</p>

</div>

</div>

</a>

</li>

<li>

<div><span>03<span>point</span></span></div>

</div>

<div>

<p>土地探しのお手伝いもいたしますので、どうぞお気軽にご相談ください。</p>

</div>

</div>

</a>

</li>

<li>

<div><span>04<span>point</span></span></div>

</div>

<div>

<h3><span>【Housework】</span>家事ラク</h3>

<p>家族や仲間との団らんも楽しめる暮らしをご提案します。</p>

</div>

</div>

</a>

</li>

<li>

<div><span>05<span>point</span></span></div>

</div>

<div>

<h3><span>【Energy Saving】</span>省エネ</h3>

<p>光・水・熱をコントロールして、効率よく無駄をなくす工夫。</p>

</div>

</div>

</a>

</li>

<li>

<div><span>06<span>point</span></span></div>

</div>

<div>

<h3><span>【Reform】</span>リフォーム</h3>

<p>お客様をはじめ、接する皆さんとは常に『笑顔で』をモットーに。</p>

</div>

</div>

</a>

</li>

</ul>

</div>

css

.sun_list {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  display: block;
}
.sun_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sun_list li {
  list-style: none;
  width: 49%;
  margin: 1% 0;
}
@media screen and (min-width: 1200px) {
  .sun_list {
    width: 80%;
  }
  .sun_list li {
    width: 32.333%;
  }
}
/* no */
.sunli_no {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-grow: 0;
}
.sunli_no div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  transition: .3s;
}
.sunli_no div > span {
  color: #fff;
  font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
  letter-spacing: 0.25rem;
  font-size: 1.1rem;
  text-align: center;
  display: block;
  line-height: 1;
  transition: .3s;
}
.sunli_no div > span > span {
  color: #949495;
  font-size: 0.6rem;
  display: block;
  line-height: 1;
  letter-spacing: 0.05rem;
  transition: .3s;
}
@media screen and (min-width: 768px) {
  .sunli_no {
    width: 200px;
  }
}
@media screen and (min-width: 992px) {
  .sunli_no div {
    width: 65px;
    height: 65px;
  }
  .sunli_no div > span {
    letter-spacing: 0.2rem;
    font-size: 1.5rem;
  }
  .sunli_no div > span > span {
    font-size: 0.7rem;
  }
}
/* con */
.sunli_con {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-grow: 1;
  flex-direction: column;
}
.sunli_con > div:first-child {
  flex-grow: 1;
}
.sunli_con h3 {
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 1rem;
  width: 100%;
}
.sunli_con h3 span {
  font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
  color: #efb507;
  font-size: 0.7rem;
  display: block;
  letter-spacing: 0.02rem;
  margin-left: -5px;
  transition: .3s;
}
.sunli_con p {
  font-size: 0.8rem;
  width: 100%;
}
.bt_li_con {
  text-decoration: none;
  display: block;
  text-align: right;
  font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
  position: relative;
  font-size: 0.7rem;
  letter-spacing: 0.03rem;
  width: 100%;
  padding-top: 1rem;
  border-top: 1px solid #aaa;
  flex-grow: 0;
}
.bt_li_con i {
  padding-right: 0.5rem;
}
@media screen and (min-width: 992px) {
  .sunli_con h3 {
    font-size: 1.2rem;
  }
  .sunli_con h3 span {
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    margin-left: -7px;
  }
  .sunli_con p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .bt_li_con {
    padding-top: 1.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.12rem;
  }
}
/* a */
.sun_list li a {
  flex-wrap: wrap;
  display: flex;
  padding: 1rem;
  text-decoration: none;
  color: #000;
  border: 4px solid #000;
  transition: .3s;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.sun_list li a:hover {
  text-decoration: none;
  background-color: #000;
  color: #fff;
}
.sun_list li a:hover .sunli_no div {
  background-color: #fff;
}
.sun_list li a:hover .sunli_no div > span {
  color: #000;
}
.sun_list li a:hover .sunli_no div > span > span {
  color: #c9caca;
}
.sun_list li a:hover .sunli_con h3 span {
  color: #c9caca;
}
@media screen and (min-width: 768px) {
  .sun_list li a {
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 1rem 7% 1.5rem 1%;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

.sun_list {

width: 90%;

margin-right: auto;

margin-left: auto;

display: block;

}

.sun_list ul {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.sun_list li {

list-style: none;

width: 49%;

margin: 1% 0;

}

@media screen and (min-width: 1200px) {

.sun_list {

width: 80%;

}

.sun_list li {

width: 32.333%;

}

/* no */

.sunli_no {

display: flex;

justify-content: center;

align-items: center;

width: 100%;

flex-grow: 0;

}

.sunli_no div {

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

width: 50px;

height: 50px;

border-radius: 50%;

background-color: #000;

transition: .3s;

}

.sunli_no div > span {

color: #fff;

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

letter-spacing: 0.25rem;

font-size: 1.1rem;

text-align: center;

display: block;

line-height: 1;

transition: .3s;

}

.sunli_no div > span > span {

color: #949495;

font-size: 0.6rem;

display: block;

line-height: 1;

letter-spacing: 0.05rem;

transition: .3s;

}

@media screen and (min-width: 768px) {

.sunli_no {

width: 200px;

}

@media screen and (min-width: 992px) {

.sunli_no div {

width: 65px;

height: 65px;

}

.sunli_no div > span {

letter-spacing: 0.2rem;

font-size: 1.5rem;

}

.sunli_no div > span > span {

font-size: 0.7rem;

}

/* con */

.sunli_con {

display: flex;

flex-wrap: wrap;

width: 100%;

flex-grow: 1;

flex-direction: column;

}

.sunli_con > div:first-child {

flex-grow: 1;

}

.sunli_con h3 {

font-weight: bold;

font-size: 1rem;

line-height: 1.6;

margin-top: 1rem;

width: 100%;

}

.sunli_con h3 span {

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

color: #efb507;

font-size: 0.7rem;

display: block;

letter-spacing: 0.02rem;

margin-left: -5px;

transition: .3s;

}

.sunli_con p {

font-size: 0.8rem;

width: 100%;

}

.bt_li_con {

text-decoration: none;

display: block;

text-align: right;

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

position: relative;

font-size: 0.7rem;

letter-spacing: 0.03rem;

width: 100%;

padding-top: 1rem;

border-top: 1px solid #aaa;

flex-grow: 0;

}

.bt_li_con i {

padding-right: 0.5rem;

}

@media screen and (min-width: 992px) {

.sunli_con h3 {

font-size: 1.2rem;

}

.sunli_con h3 span {

font-size: 0.8rem;

letter-spacing: 0.05rem;

margin-left: -7px;

}

.sunli_con p {

font-size: 1rem;

margin-bottom: 1.5rem;

}

.bt_li_con {

padding-top: 1.5rem;

font-size: 0.9rem;

letter-spacing: 0.12rem;

}

/* a */

.sun_list li a {

flex-wrap: wrap;

display: flex;

padding: 1rem;

text-decoration: none;

color: #000;

border: 4px solid #000;

transition: .3s;

width: 100%;

height: 100%;

flex-direction: column;

}

.sun_list li a:hover {

text-decoration: none;

background-color: #000;

color: #fff;

}

.sun_list li a:hover .sunli_no div {

background-color: #fff;

}

.sun_list li a:hover .sunli_no div > span {

color: #000;

}

.sun_list li a:hover .sunli_no div > span > span {

color: #c9caca;

}

.sun_list li a:hover .sunli_con h3 span {

color: #c9caca;

}

@media screen and (min-width: 768px) {

.sun_list li a {

flex-wrap: nowrap;

flex-direction: row;

padding: 1rem 7% 1.5rem 1%;

}

画像リンク

このテンプレート内にある「img a」はマウスオーバーで勝手に薄くなります。
100%表示テンプレートも同様です。

			<div class="row">
			  <div class="col-6 offset-3"><a href="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/page_img.jpg" alt="リンク画像"></a></div>
			</div>

</div>

押したようなボタン

hover/クリックしたときに押したような動作をするボタンです。

click_btn

html

			<div class="row">
			  <div class="col-6 offset-3">
				  <div class="click_btn"><a href="#">click_btn</a></div>
				</div>
			</div>

<div class="click_btn"><a href="#">click_btn</a></div>

</div>

css

.click_btn{
	position: relative;
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}
.click_btn a {
	display: block;
	width:100%;
	cursor: pointer;
	padding: 10px;
	border-radius: 4px;
	        box-sizing: border-box;
	color: #fff;
	text-align: center;
	text-decoration: inherit;
	background: #555;
	        box-shadow: 0 6px 0 #000, 0 12px 0 rgba(0,0,0,.2);
	transition: color .3s, background .3s, box-shadow .3s, -webkit-transform 0.3s;
	transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;
	transition: color .3s, background .3s, box-shadow .3s, transform 0.3s, -webkit-transform 0.3s;
}
.click_btn:hover a {
	background: #888;
	        box-shadow: 0 3px 0 #333, 0 6px 0 rgba(0,0,0,.2);
	        -webkit-transform: translateY(3px);
	                transform: translateY(3px);
	text-decoration: none;
}
.click_btn:active a {
	color: #ddd;
	background: #333;
	        box-shadow: 0 0 0 #000, 0 0 0 rgba(0,0,0,.2);
	        -webkit-transform: translateY(6px);
	                transform: translateY(6px);
	        transition-duration: .1s;
}

.click_btn{

position: relative;

width: 100%;

text-align: center;

margin-bottom: 20px;

}

.click_btn a {

display: block;

width:100%;

cursor: pointer;

padding: 10px;

border-radius: 4px;

box-sizing: border-box;

color: #fff;

text-align: center;

text-decoration: inherit;

background: #555;

box-shadow: 0 6px 0 #000, 0 12px 0 rgba(0,0,0,.2);

transition: color .3s, background .3s, box-shadow .3s, -webkit-transform 0.3s;

transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;

transition: color .3s, background .3s, box-shadow .3s, transform 0.3s, -webkit-transform 0.3s;

}

.click_btn:hover a {

background: #888;

box-shadow: 0 3px 0 #333, 0 6px 0 rgba(0,0,0,.2);

-webkit-transform: translateY(3px);

transform: translateY(3px);

text-decoration: none;

}

.click_btn:active a {

color: #ddd;

background: #333;

box-shadow: 0 0 0 #000, 0 0 0 rgba(0,0,0,.2);

-webkit-transform: translateY(6px);

transform: translateY(6px);

transition-duration: .1s;

}

簡単なボタン

色変更

hoverで色を変更します。

normal_btn

html

			<div class="row">
			  <div class="col-6 offset-3">
				  <div class="normal_btn"><a href="#">normal_btn</a></div>
				</div>
			</div>

<div class="normal_btn"><a href="#">normal_btn</a></div>

</div>

css

.normal_btn {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}
.normal_btn a  {
	color: #000;
	text-decoration: none;
	display: block;
	background-color: #ccc;
	text-align: center;
	padding: 10px;
	font-size: 1rem;
	letter-spacing: 0.03rem;
	transition: .3s;
} 
.normal_btn a:hover  {
	color: #fff;
	text-decoration: none;
	background-color: #1a1a1a;
}

.normal_btn {

width: 100%;

padding-top: 10px;

padding-bottom: 10px;

text-align: center;

}

.normal_btn a {

color: #000;

text-decoration: none;

display: block;

background-color: #ccc;

text-align: center;

padding: 10px;

font-size: 1rem;

letter-spacing: 0.03rem;

transition: .3s;

}

.normal_btn a:hover {

color: #fff;

text-decoration: none;

background-color: #1a1a1a;

}

角丸

角丸のボタンです。

rounded_btn

html

			<div class="row">
			  <div class="col-6 offset-3">
				  <div class="rounded_btn"><a href="#">rounded_btn</a></div>
				</div>
			</div>

<div class="rounded_btn"><a href="#">rounded_btn</a></div>

</div>

css

.rounded_btn {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}
.rounded_btn a  {
	color: #fff;
	text-decoration: none;
	display: block;
	background-color: #000;
	text-align: center;
	padding: 10px;
	font-size: 1rem;
	letter-spacing: 0.03rem;
	transition: .3s;
	border: 1px #000 solid;
	border-radius: 30px;
} 
.rounded_btn a:hover  {
	color: #000;
	text-decoration: none;
	background-color: #fff;
}

.rounded_btn {

width: 100%;

padding-top: 10px;

padding-bottom: 10px;

text-align: center;

}

.rounded_btn a {

color: #fff;

text-decoration: none;

display: block;

background-color: #000;

text-align: center;

padding: 10px;

font-size: 1rem;

letter-spacing: 0.03rem;

transition: .3s;

border: 1px #000 solid;

border-radius: 30px;

}

.rounded_btn a:hover {

color: #000;

text-decoration: none;

background-color: #fff;

}

角を取る

hoverで角を丸くします。

hover_rounded_btn

html

			<div class="row">
			  <div class="col-6 offset-3">
				  <div class="hover_rounded_btn"><a href="#">hover_rounded_btn</a></div>
				</div>
			</div>

<div class="hover_rounded_btn"><a href="#">hover_rounded_btn</a></div>

</div>

css

.hover_rounded_btn {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}
.hover_rounded_btn a  {
	color: #fff;
	text-decoration: none;
	display: block;
	background-color: #000;
	text-align: center;
	padding: 10px;
	font-size: 1rem;
	letter-spacing: 0.03rem;
	transition: .3s;
	border: 1px #000 solid;
} 
.hover_rounded_btn a:hover  {
	text-decoration: none;
	border-radius: 30px;
}

.hover_rounded_btn {

width: 100%;

padding-top: 10px;

padding-bottom: 10px;

text-align: center;

}

.hover_rounded_btn a {

color: #fff;

text-decoration: none;

display: block;

background-color: #000;

text-align: center;

padding: 10px;

font-size: 1rem;

letter-spacing: 0.03rem;

transition: .3s;

border: 1px #000 solid;

}

.hover_rounded_btn a:hover {

text-decoration: none;

border-radius: 30px;

}

疑似要素使用ボタン

参考にしていたページは削除されてしまったかURLが変更されたようなので、参考にしたサイトのトップページのURLを記載しておきます。
参考：https://lopan.jp/

背景色左から右

hoverで背景色が左から右に動きます。

slide_btn

html

			<div class="row">
			  <div class="col-6 offset-3">
				  <div class="slide_btn"><a href="#">slide_btn</a></div>
				</div>
			</div>

<div class="slide_btn"><a href="#">slide_btn</a></div>

</div>

css

.slide_btn{
	z-index: 10;
	position: relative;
	width: 100%;
	text-align: center;
	background: rgba(0,0,0,.3);
}
.slide_btn::before {
	content: "";
	z-index: -1;
	display: block;
	position: absolute;
	top: 0;
	left: 0;/* rightに変更で背景色右から左 */
	width: 0%;
	height: 100%;
	background: #000;
	-webkit-transition: width 0.6s;
	-o-transition: width 0.6s;
	transition: width 0.6s;
}
.slide_btn a{
	display: block;
	width: 100%;
	color: #fff;
	font-size: 1em;
	padding:10px;
}
.slide_btn a:hover{
	color: #fff;
	text-decoration: none;
}
.slide_btn:hover::before {
	width: 100%;
}

.slide_btn{

z-index: 10;

position: relative;

width: 100%;

text-align: center;

background: rgba(0,0,0,.3);

}

.slide_btn::before {

content: "";

z-index: -1;

display: block;

position: absolute;

top: 0;

left: 0;/* rightに変更で背景色右から左 */

width: 0%;

height: 100%;

background: #000;

-webkit-transition: width 0.6s;

-o-transition: width 0.6s;

transition: width 0.6s;

}

.slide_btn a{

display: block;

width: 100%;

color: #fff;

font-size: 1em;

padding:10px;

}

.slide_btn a:hover{

color: #fff;

text-decoration: none;

}

.slide_btn:hover::before {

width: 100%;

}

背景色上から下

hoverで背景色が上から下に動きます。

down_btn

html

			<div class="row">
			  <div class="col-6 offset-3">
				  <div class="down_btn"><a href="#">down_btn</a></div>
				</div>
			</div>

</div>

css

.down_btn{
	z-index: 10;
	position: relative;
	width: 100%;
	text-align: center;
	background: rgba(0,0,0,.3);
}
.down_btn::before {
	content: "";
	z-index: -1;
	display: block;
	position: absolute;
	top: 0;/* bottomに変更で背景色下から上 */
	left: 0;
	width: 100%;
	height: 0%;
	background: #000;
	-webkit-transition: height 0.3s;
	-o-transition: height 0.3s;
	transition: height 0.3s;
}
.down_btn a{
	display: block;
	width: 100%;
	color: #fff;
	font-size: 1em;
	padding: 0.8em 0;
}
.down_btn a:hover{
	color: #fff;
	text-decoration: none;
}
.down_btn:hover::before {
	height: 100%;
}

.down_btn{

z-index: 10;

position: relative;

width: 100%;

text-align: center;

background: rgba(0,0,0,.3);

}

.down_btn::before {

content: "";

z-index: -1;

display: block;

position: absolute;

top: 0;/* bottomに変更で背景色下から上 */

left: 0;

width: 100%;

height: 0%;

background: #000;

-webkit-transition: height 0.3s;

-o-transition: height 0.3s;

transition: height 0.3s;

}

.down_btn a{

display: block;

width: 100%;

color: #fff;

font-size: 1em;

padding: 0.8em 0;

}

.down_btn a:hover{

color: #fff;

text-decoration: none;

}

.down_btn:hover::before {

height: 100%;

}

振り分けページへ戻る

トップへ戻る

page ボタン

特殊ボタン

上下左右中央にアイコンとテキストボタン

上下左右中央にアイコンとテキストボタン

上下左右中央にアイコンとテキストボタン横並び

上下左右中央にアイコンとテキストボタン横並び

サンホームさん持ってきたやつ

【Kids Design】キッズデザイン

【Durability】耐震性・耐久性

【Land Hunt】土地探し

【Housework】家事ラク

【Energy Saving】省エネ

【Reform】リフォーム

画像リンク

押したようなボタン

簡単なボタン

色変更

角丸

角を取る

疑似要素使用ボタン

背景色左から右

背景色上から下