Issue
Summary
I want to add a Right-Pointing Double Angle Quotation Mark (») to a button text when a user hovers over the botton, using a smooth CSS animation/transition.
Question
I'd like add a Right-Pointing Double Angle Quotation Mark (») to a button text when the mouse hovers over the button. This works quite well, see my code below. However, when I move the mouse over the button, the text "jumps" instead of moving smoothly, although I've added a transition.
The animated button example on https://www.w3schools.com/css/css3_buttons.asp looks fine, but doesn't work well buttons with multi line text.
Code
You can run the code snipplet below.
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>The blue and red frame are only inserted for debugging purposes.
How can a make the text move smoothly? Any hint is highly appreciated.
Final code after the accepted answer
Thanks Paulie_D for your answer: For everyone who is interested, please find my final code here: https://jsfiddle.net/uqgd8bav/
Solution
content cannot be transitioned so I would suggest setting the width to zero and transitioning to, say, 1ch or whatever you feel appropriate.
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>Answered By - Paulie_D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.