ホームページ >ウェブフロントエンド >CSSチュートリアル >プレーンテキストとアイコン付きのボタンを実装するための HTML および CSS コード

プレーンテキストとアイコン付きのボタンを実装するための HTML および CSS コード

不言オリジナル: 2018-06-09 16:01:582670ブラウズ

この記事では、HTML と CSS を使用してプレーンテキストとアイコンのボタンを実装する方法を主に紹介します。この記事では、純粋なテキストとアイコンの 2 種類のボタンを紹介します。興味のある方は、この記事を参照してください。いくつかの基本的なページ要素を修正し、将来的に更新します。まず、最も一般的なのはボタンの切り抜きです。ボタンにはさまざまな外観がありますが、大きく分けてプレーンテキストボタンとアイコン付きボタンに分けられます。この 2 つのボタンの実装方法について説明します。レンダリングは次のとおりです:

コードは次のとおりです:

XML/HTML

nbsp;html>


  <title>按钮写法</title>
  <meta>
  <meta>
  <link>
<style>
  a:hover{text-decoration: none;}     
  .btn{     
    display: inline-block;     
    margin-top: 10px;     
    padding: 10px 24px;     
    border-radius: 4px;     
    background-color: #63b7ff;     
    color: #fff;     
    cursor: pointer;     
  }     
  .btn:hover{     
    background-color: #99c6ff;     
  }     
  .inbtn{     
    border: none;     
  }     
  .bubtn{     
    border: none;     
  }     
  .btn{     
    font-style: normal;     
  }     
  .bgbtn span{     
    margin-left: 10px;     
    padding-left: 20px;     
    background: url(images/edit.png) left center no-repeat;     
  }     
  .bgbtn02 img{     
    margin-bottom: -3px;     
    margin-right: 10px;     
  }     
</style>


<!--<a>标签按钮-->
<a>a标签按钮</a>
<!--<input>标签按钮-->
<input>
<!--<button>标签按钮-->
<button>button标签按钮</button>
<!--任意标签按钮-->
<i>i标签按钮</i>
<!--带背景图标按钮-->
<a>
  <span>带图标按钮</span>
</a>
<a>
  <img  src="/static/imghwm/default1.png" data-src="images/edit.png" class="lazy" alt="プレーンテキストとアイコン付きのボタンを実装するための HTML および CSS コード" >带图标按钮     
</a>

さまざまなタグの長所と短所については、興味深いボタンがある場合でも理解する必要があります。ああ、一緒に実装します。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

プレーンテキストとアイコン付きのボタンを実装するための HTML および CSS コード

関連記事