highlight auto-complete button

app.py

@@ -32,6 +32,12 @@ function updateTextareaDir(language) {
 </script>"""
 # todo: add dropdown keyboard custom component with key mapping
 
+CUSTOM_CSS = """
+#auto-complete-button {
+    border-color: var(--button-primary-border-color-hover);
+}
+"""
+
 HF_TOKEN = os.getenv("HF_TOKEN")
 request_logger = (
     gradio.HuggingFaceDatasetSaver(
@@ -105,7 +111,7 @@ def translate(text: str, text_lang: str, sign_lang: str):
         raise gradio.Error(f"Error during translation: {exc}")
 
 
-with gradio.Blocks(title=TITLE, head=CUSTOM_JS) as gradio_app:
+with gradio.Blocks(title=TITLE, head=CUSTOM_JS, css=CUSTOM_CSS) as gradio_app:
     gradio.Markdown(f"# {TITLE}")
     gradio.Markdown(DESCRIPTION)
     with gradio.Row():
@@ -136,7 +142,9 @@ with gradio.Blocks(title=TITLE, head=CUSTOM_JS) as gradio_app:
                         clear_button = gradio.ClearButton(
                             source_textbox, api_name=False
                         )
-                        auto_complete_button = gradio.Button("Auto-Complete")
+                        auto_complete_button = gradio.Button(
+                            "Auto-Complete", elem_id="auto-complete-button"
+                        )
                         auto_complete_button.click(
                             auto_complete_text,
                             inputs=[language_model_dropdown, source_textbox],