diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
index f80bbe13e03..4b0eaf19926 100644
--- a/src/css/mapbox-gl.css
+++ b/src/css/mapbox-gl.css
@@ -228,6 +228,18 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         visibility: visible;
     }
 
+    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib,
+    .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib,
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib {
+        margin: 5px;
+    }
+
+    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:hover,
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
+        padding: 2px 4px 2px 24px;
+        border-radius: 12px 3px 3px 12px;
+    }
+
     .mapboxgl-ctrl-attrib.mapboxgl-compact > * {
         display: none;
     }
@@ -240,8 +252,6 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         content: '';
         cursor: pointer;
         position: absolute;
-        bottom: 0;
-        right: 0;
         background-image: svg-load('svg/mapboxgl-ctrl-attrib.svg');
         background-color: rgba(255, 255, 255, 0.5);
         width: 24px;
@@ -249,6 +259,26 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         box-sizing: border-box;
         border-radius: 12px;
     }
+
+    .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        bottom: 0;
+        right: 0;
+    }
+
+    .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        top: 0;
+        right: 0;
+    }
+
+    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        top: 0;
+        left: 0;
+    }
+
+    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+        bottom: 0;
+        left: 0;
+    }
 }
 
 .mapboxgl-ctrl-attrib a {