search

Home >Web Front-end >CSS Tutorial >How to create an image icon button with CSS (with code)

How to create an image icon button with CSS (with code)

不言
不言Original
2018-11-09 17:47:084183browse

This article will share with you how to use CSS to create a button with an image icon. The content is very detailed. Interested friends can take a look.

When displaying an image icon on the button surface, please write code to display the image in the button label. To achieve this effect, use a span tag with display set to an inline block.

The code is as follows:

image-button.css

#buttonImage {
  background-image:url('/img/search.png');  
  display:inline-block;  
  margin-top:2px;  
  width:16px;  
  height:16px;
}
.flatbutton{
  border:1px solid #3079ed;  
  background-color:#4d90fe;  
  width:100px;  
  height:28px;
}

image-button.html

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="image-button.css" />
</head>
<body>
  <button class="flatbutton"><span id="buttonImage"></span></button>
  </body>
  </html>

The effect is as follows:

How to create an image icon button with CSS (with code)


The above is the detailed content of How to create an image icon button with CSS (with code). For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS realizes the effect of gradient button (code example)Next article：CSS realizes the effect of gradient button (code example)

Related articles

See more