【HTML&CSS】レスポンシブなボタン風なリンクPartsのサンプルコード(SampleCode)

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、レスポンシブなボタン・リンクPartsのサンプルコードを掲載します。

1 レスポンシブなボタン風なリンクPartsのサンプルコード(SampleCode)
2 おすすめの関連記事
3 おすすめ書籍(HTML&CSS編)
4 Twitterやってます！Follow Me！
5 最近の投稿

レスポンシブなボタン風なリンクPartsのサンプルコード(SampleCode)

SampleCodeのHTMLを実行すると、次のようなボタン風なリンクが画面に表示されます。

SampleCodeは、次のとおりです。

Styleなど自由にカスタマイズして使ってみてください。

<style>
.more-topic-btn {
    background-color: #b1d36e;
    border-radius: 4px;
    padding: 10px 30px;
    text-decoration: none;
    color: white;
}

/*　画面サイズ:768px(最小値) からは、ここのStyleを適用する　*/
/* PC and Tablet Size */
@media screen and (min-width:768px) {
    .more-topic-div {
        margin-top: 50px;
        text-align: center;
    }
}

/*　画面サイズ:767px(最大値) までは、ここのStyleを適用する　*/
/* スマホサイズ */
@media screen and (max-width:767px) {
    .more-topic-div {
        margin-top: 50px;
    }
}
</style>


<div class="more-topic-div">
    <a href="#robotama" class="more-topic-btn" >MORE TOPIC</a>
</div>