我想在鼠标悬停在按钮上时向按钮文本添加右向双角引号 (»)。这工作得很好,请参阅下面的我的代码。但是,当我将鼠标移到按钮上时,文本会“跳跃”,而不是平滑移动,尽管我添加了过渡。
https://www.w3schools.com/css/css3_buttons.asp上的动画按钮示例看起来不错,但对于具有多行文本的按钮效果不佳。
您可以运行下面的代码片段。
html {
font-family: Tahoma;
margin: 0 5px 0 5px;
}
body {
margin: 0;
}
.svgbutton {
display: inline-block;
border-radius: 4px;
padding: 2px;
width: 6em;
box-shadow: 2px 2px 1px #efefef;
color: black;
border: 1px solid #dfdfdf;
background-color: transparent;
cursor: pointer;
transition: 2s;
vertical-align: top;
}
.svgbutton span {
cursor: pointer;
display: inline-block;
border: thin solid red;
}
.svgbutton span::after {
content: '';
opacity: 0;
border: thin solid blue;
}
.svgbutton:hover span {
}
.svgbutton:hover span::after {
content: ' \00bb';
opacity: 1;
transition: 0.5s;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<button class="svgbutton" onClick="alert('Click')">
<svg width="100px" height="60px">
<rect x="10" y="10" width="50" height="50" style="fill:red;stroke-width:0;"/>
</svg><br />
<span>Test</span>
</button>
<button class="svgbutton" onClick="alert('Click')">
<svg width="100px" height="60px">
<rect x="10" y="10" width="50" height="50" style="fill:green;stroke-width:0;"/>
</svg><br />
<span>Test Test Test</span>
</button>
<button class="svgbutton" onClick="alert('Click')">
<svg width="100px" height="60px">
<rect x="10" y="10" width="50" height="50" style="fill:blue;stroke-width:0;"/>
</svg><br />
<span>Test Test Test Test</span>
</button>
</p>
</body>
</html>
蓝色和红色框仅出于调试目的而插入。
怎样才能让文字移动流畅?任何提示都将受到高度赞赏。
content
无法转换,因此我建议将
width
设置为零并转换为
1ch
或您认为合适的任何内容。
html {
font-family: Tahoma;
margin: 0 5px 0 5px;
}
body {
margin: 0;
}
.svgbutton {
display: inline-block;
border-radius: 4px;
padding: 2px;
width: 6em;
box-shadow: 2px 2px 1px #efefef;
color: black;
border: 1px solid #dfdfdf;
background-color: transparent;
cursor: pointer;
transition: 2s;
vertical-align: top;
}
.svgbutton span {
cursor: pointer;
display: inline-block;
border: thin solid red;
}
.svgbutton span::after {
content: ' \00bb';
opacity: 0;
width: 0;
display: inline-block;
//border: thin solid blue;
}
.svgbutton:hover span {}
.svgbutton:hover span::after {
content: ' \00bb';
opacity: 1;
transition: 0.5s;
width: 1ch;
}
<button class="svgbutton" onClick="alert('Click')">
<svg width="100px" height="60px">
<rect x="10" y="10" width="50" height="50" style="fill:red;stroke-width:0;"/>
</svg><br />
<span>Test</span>
</button>
<button class="svgbutton" onClick="alert('Click')">
<svg width="100px" height="60px">
<rect x="10" y="10" width="50" height="50" style="fill:green;stroke-width:0;"/>
</svg><br />
<span>Test Test Test</span>
</button>
<button class="svgbutton" onClick="alert('Click')">
<svg width="100px" height="60px">
<rect x="10" y="10" width="50" height="50" style="fill:blue;stroke-width:0;"/>
</svg><br />
<span>Test Test Test Test</span>
</button>