diff --git a/app/assets/javascripts/deprecated_notes.js b/app/assets/javascripts/deprecated_notes.js
index 008e12abbcdd3175ad81abc6d043ef021db5aa34..9b5b4cef1b9c28d5e9a0c044818170006f238060 100644
--- a/app/assets/javascripts/deprecated_notes.js
+++ b/app/assets/javascripts/deprecated_notes.js
@@ -152,7 +152,7 @@ export default class Notes {
     // update the file name when an attachment is selected
     this.$wrapperEl.on('change', '.js-note-attachment-input', this.updateFormAttachment);
     // reply to diff/discussion notes
-    this.$wrapperEl.on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
+    this.$wrapperEl.on('focus', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
     // add diff note
     this.$wrapperEl.on('click', '.js-add-diff-note-button', this.onAddDiffNote);
     // add diff note for images
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 8a64b0999b68ac68b04e2f88013e3e472c3a3e53..88509dbc4a15c4c9e5fbd4b7f66b5271cb18883b 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -191,25 +191,6 @@
     color: $gray-700;
   }
 
-  // deprecated class
-  &.btn-text-field {
-    width: 100%;
-    text-align: left;
-    padding: 6px 16px;
-    border-color: $border-color;
-    color: $gray-darkest;
-    background-color: $white;
-
-    &:hover,
-    &:active,
-    &:focus {
-      cursor: text;
-      box-shadow: none;
-      border-color: lighten($blue-300, 20%);
-      color: $gray-darkest;
-    }
-  }
-
   &.dot-highlight::after {
     content: '';
     background-color: $blue-500;
diff --git a/app/helpers/notes_helper.rb b/app/helpers/notes_helper.rb
index af8da86b3910ece0e6a5713bea6d9c96eb0150b8..75e89a7d7bc5783f8e7a753e85ab2a054076d909 100644
--- a/app/helpers/notes_helper.rb
+++ b/app/helpers/notes_helper.rb
@@ -71,16 +71,20 @@ def add_diff_note_button(line_code, position, line_type)
   def link_to_reply_discussion(discussion, line_type = nil)
     return unless current_user
 
-    data = {
-      discussion_id: discussion.reply_id,
-      discussion_project_id: discussion.project&.id,
-      line_type: line_type
-    }
-
-    button_tag 'Reply...',
-      class: 'btn btn-text-field js-discussion-reply-button',
-      data: data,
-      title: 'Add a reply'
+    content_tag(
+      :textarea,
+      rows: 1,
+      placeholder: _('Reply...'),
+      'aria-label': _('Reply to comment'),
+      class: 'reply-placeholder-text-field js-discussion-reply-button',
+      data: {
+        discussion_id: discussion.reply_id,
+        discussion_project_id: discussion.project&.id,
+        line_type: line_type
+      }
+    ) do
+      # render empty textarea
+    end
   end
 
   def note_max_access_for_user(note)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5b32b637b96e4fcafe42443ab445fc3482ca1069..1a6cad578a9b4387066eea2f90694ccaada73179 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -39935,6 +39935,9 @@ msgstr ""
 msgid "Reply to this email directly or %{view_it_on_gitlab}."
 msgstr ""
 
+msgid "Reply..."
+msgstr ""
+
 msgid "Reply…"
 msgstr ""
 
diff --git a/spec/features/projects/commit/comments/user_adds_comment_spec.rb b/spec/features/projects/commit/comments/user_adds_comment_spec.rb
index b0cb57f158dd7183b5b3bb4177df2407784506c0..d9225192f6b2357823e5179388a159bee4a8c0dc 100644
--- a/spec/features/projects/commit/comments/user_adds_comment_spec.rb
+++ b/spec/features/projects/commit/comments/user_adds_comment_spec.rb
@@ -112,7 +112,7 @@
             click_button("Comment")
           end
 
-          expect(page).to have_button("Reply...").and have_no_css("form.new_note")
+          expect(page).to have_css(".reply-placeholder-text-field").and have_no_css("form.new_note")
         end
 
         # A comment should be added and visible.