CSS Gradient Border with Rounded Corners has Unexpected Gap Between Background and Border

By -

I am looking to create a button with a gradient border that fades-in and out on hover:

Codepen here:

background: linear-gradient(rgb(25, 25, 25), rgb(25, 25, 25)) padding-box, linear-gradient(160deg, #2787FF, #54D1A4) border-box;

An animation of the goal button design

However, using the border-box and padding-box on the background of the element causes an unexpected space on the corners of the button, causing the gradient border to peer through before hovering.

enter image description here

Is it possible get rid of this small space while keeping the existing animation style of the gradient border fading in and out?



Comments

Post a Comment

Popular posts from this blog

I get wrong characters when retreiving the message body of an email using TIdIMAP4.UIDRetrieveTextPeek2()

By -
In my application (Windows 10, Delphi 10.4), I use TIdIMAP4 to retrieve an email's body from the server with this code: var aBody : string := ''; UIDRetrieveTextPeek2(MsgID,aBody); If the returned string starts with <!DOCTYPE html>'#$D#$A'<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:... or <html><head><style type="text/css">'#$D#$A'@media screen and (max-width:480px) {'#$D#$A' .background_inner {'#$D#$A' padding: 0!important;'#$D#$A'.... I can see the HTML content formed right, but when it starts with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.='#$D#$A'w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">=0A<html xmlns=3D"http://www.='#$D#$A'w3.org/1999/xhtml"><head><style type=3D"text/css" media=3D"all">=0A=09...
Read more

How to drop the all the 1's in a correlation matrix

By -
I'm trying to change/eliminate the 1's that run diagonally in a correlation matrix so that when I take the average of the rows of the correlation matrix, the 1s don't affect the mean of each of the rows. Let's say I have the dataset, A B C D E F 45 49 49 65 65 45 60 62 63 80 80 60 80 82 83 100 100 80 80 100 123 122 120 80 39 52 43 60 50 65 58 64 58 80 65 80 78 84 78 109 85 100 78 130 111 130 85 100 78 104 78 159 115 100 44 48 65 50 64 43 59 63 80 65 80 58 79 83 100 85 105 78 79 103 120 135 115 78 45 30 35 20 20 45 50 20 55 25 25 30 60 45 50 90 80 70 When I do dfcorr = df.corr() dfcorr, I get A B C D E F A 1.000000 0.842125 0.834808 0.832773 0.844158 0.806787 B 0.842125 1.000000 0.847606 0.907595 0.818668 0.863645 C 0.834808 0.847606 1.000000 0.718199 0.804671 0.582033 D 0.832773 0.907595 0.718199 1.000000 0.884236 0.878421 E 0.844158 0.818668 0.804671 0.884236 1.000000 0.718668 F 0.806787 0.863645 0.582033 0.8784...
Read more

Today Walkin 14th-Sept

By -
Image
14th Sept 2017 ( GO Through all List) Read Walkin details properly , Try to call company before attending if possible !!! ==================================== 1. Myntra through fresherworld (Call Based , Venue shared to shortlisted candidates) _____________________________ 2. Magna : Hiring for Client Harman : C++
Read more