How do I make the button have rounded corners while still doing the animation?
Question
I got this code from code pen but I am looking make sure the button ALWAYS has rounded corners. I do not want sharp corners. I need to have rounded corners both before and on hover.
How can I do this? I am not sure how i can change it because when i added rounded corners then for some reason it left a weird outline still.
<!DOCTYPE.html> <html> <head> <meta charset="UTF-8"> <style> body { text-align: center; background: black; } a { color: #000; text-decoration: none; text-transform: uppercase; font-family: Helvetica; } a, span { font-size: 20px; } svg { width: 230px; height: 40px; } /* THE ROUND PSEUDO-ELEMENT HOVER STYLES */ .round, .svg, .highlight { max-width: 960px; margin: 0 auto; } /* THE SVG HOVER EFFECTS */ .svg .button { text-decoration: none; color: #fff; position: relative; display: inline-block; width: 230px; height: 40px; margin: 20px; overflow: hidden; } .svg .button:nth-child(3) { overflow: visible; position: relative; top: -20px; } .svg .button rect { position: absolute; top: 0; left: 0; stroke-width: 4px; stroke-dashoffset: 400px; stroke: olivedrab; } .svg .button span { color: olivedrab; width: 230px; height: 40px; display: inline-block; text-align: center; position: absolute; left: 0; top: 0; line-height: 40px; transition: all .2s linear; border-radius: 50px; } .svg .button span:hover { color: #fff; background: olivedrab; transition: all 1s cubic-bezier(1.25s 0, 1.15, 1, 1); transition-delay: .5s; } .svg .button:nth-child(1):hover rect { animation: draw1 .75s linear forwards; } @keyframes draw1 { 0% { stroke-dasharray: 300; stroke-dashoffset: 700; stroke-width: 4px; } 75% { stroke-dasharray: 900; stroke-width: 1px; } 100% { stroke-dasharray: 900; stroke-width: 1px; } } </style> </head> <body> <div class="svg"> <a class="button" href="#"> <svg> <rect height="40" width="230" fill="transparent" /> </svg> <span>Button1</span> </a> </div> </body> </html>
1 answers
solution1
0 2017-03-27 05:17:35
<rect height="40" width="230" rx="20" ry="20" fill="transparent" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how do I make rounded corners on hovers?
How do you make rounded corners on a vector rectangle w/dojo?
How do I add rounded corners to complex shapes in CSS
how to make rounded corners on polygon with kineticjs
how to make every button have its respective text appear next to it, when hovered and still apply the type animation
How can I make the JQuery addon “Rounded Corners” work? (or suggest a better option)
I am doing a typescript project and I am trying to make my edit button to “edit” the row that I have selected. But I have no idea on how to do it
hover on corner of rounded corners button
How can I give an image two rounded corners?
How to draw an arc with rounded corners?
Related Tags