我想设计一个像这样的按钮
我编写了一个创建按钮的代码
CSS
.button {
color: white;
width: 10%;
font-size: 15pt;
padding: .5em 1em;
cursor: pointer;
box-shadow: 2px 2px 5px hsla(0,0%,0%,.7);
text-shadow: 0px 0px 1px hsla(0,0%,0%,.8);
border-radius: 5px;
margin: 1em;
background-image: -webkit-radial-gradient(50% 0%,160% 100%,hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%, hsla(0,30%,400%,0));
background-color: orange;
text-align: right;
display: inline-block;
}
img {
margin-top: -35%;
margin-left: -20%;
display: block;
}
HTML
<button class="button"><img src="img/Play.png" />Play</button>
但是结果是
谁能帮我把 img 放在按钮的左侧？
最佳答案
请使用以下代码: CSS:
<style>
.button {
color: white;
width: 210px;
height: 35px;
text-align: left;
border: 0px;
font-size: 15pt;
padding: 0 0 0 65px;
cursor: pointer;
box-shadow: 2px 2px 5px hsla(0,0%,0%,.7);
text-shadow: 0px 0px 1px hsla(0,0%,0%,.8);
border-radius: 5px;
background: -webkit-linear-gradient(left, #cdb060 0%,#a5862e 100%); /* Chrome10+,Safari5.1+ */
background-color: orange;
}
img {
display: block;
left: 0;
position: absolute;
top: -2%;
z-index: 1;
}
</style>
和 HTML:
<body>
<button class="button">Play Trauker</button>
<img src="img/play-stop.png" />
</body>
关于html - 在 Html 中将图像放在按钮上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32948135/