プレーンテキストとアイコン付きのボタンを実装するための HTML および CSS コード-CSSチュートリアル-php.cn

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

不言

リリース： 2018-06-09 16:01:58

オリジナル

2567 人が閲覧しました

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

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

XML/HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>按钮写法</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <link rel="stylesheet" href="css/style.css">
<style type="text/css">
  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>
</head>
<body>
<!--<a>标签按钮-->
<a href="" class="btn">a标签按钮</a>
<!--<input>标签按钮-->
<input class="inbtn btn" type="button" value="input标签按钮"/>
<!--<button>标签按钮-->
<button class="bubtn btn">button标签按钮</button>
<!--任意标签按钮-->
<i class="ibtn btn">i标签按钮</i>
<!--带背景图标按钮-->
<a href="" class="bgbtn btn">
  <span>带图标按钮</span>
</a>
<a href="" class="bgbtn02 btn">
  <img src="images/edit.png"/>带图标按钮     
</a>
</body>
</html>

ログイン後にコピー

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

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