diff --git a/index.html b/index.html index 1a79b03..6d20a42 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ + + @@ -69,7 +71,9 @@
diff --git a/styles.css b/styles.css index df0fd2e..64da370 100644 --- a/styles.css +++ b/styles.css @@ -256,7 +256,7 @@ canvas { } #download img { - width: 20px; + width: 80px; height: 20px; margin-right: 8px; filter: brightness(0) invert(1); @@ -267,6 +267,7 @@ canvas { position: fixed; bottom: 20px; right: 20px; + border-radius: 50px; } #shareBtn { @@ -277,6 +278,7 @@ canvas { cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + color: white; } #shareBtn:hover { @@ -291,6 +293,34 @@ canvas { filter: brightness(0) invert(1); } +#shareBtn:focus { + outline: 3px solid rgba(19, 108, 2, 0.8); + outline-offset: 4px; +} + +@media (max-width: 600px) { + #shareBtn { + padding: 10px; + } + + #shareBtn img { + width: 20px; + height: 20px; + } +} + +.btn-label { + color: white; + font-size: 16px; + margin-left: 8px; + display: none; /* Hidden by default */ +} + +#shareBtn:hover .btn-label { + display: inline; /* Show on hover */ +} + + #allOptions { display: none; position: absolute;