diff --git a/lms/static/sass/features/_course-sock.scss b/lms/static/sass/features/_course-sock.scss
index d1e9b83614..c727e98ad9 100644
--- a/lms/static/sass/features/_course-sock.scss
+++ b/lms/static/sass/features/_course-sock.scss
@@ -101,6 +101,12 @@
         color: theme-color("inverse");
         background-image: none;
         box-shadow: none;
+        cursor: pointer;
+
+        &:hover {
+          background-color: theme-color("inverse");
+          color: theme-color("success");
+        }
 
         @media (max-width: 960px) {
           & {
diff --git a/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html b/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html
index 9aaf44bb46..932c703dba 100644
--- a/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html
+++ b/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html
@@ -59,9 +59,9 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
                 % endif
                 <img class="mini-cert" alt="Example Certificate Image" src="${static.url('course_experience/images/verified-cert.png')}"/>
                 <a href="${upgrade_url}">
-                    <button type="button" class="btn btn-upgrade stuck-top focusable action-upgrade-certificate" data-creative="original_sock" data-position="sock">
+                    <div class="btn btn-upgrade stuck-top focusable action-upgrade-certificate" data-creative="original_sock" data-position="sock">
                         ${Text(_('Upgrade ({course_price})')).format(course_price=HTML(course_price))}
-                    </button>
+                    </div>
                 </a>
             </div>
         </div>