Merge pull request #49593 from ayushontop/main

Fix: Button Text Not Displayed in Selected Language for "Tell Your Story" Button in Case Study Tab

Author: k8s-ci-robot

layouts/case-studies/list.html

@@ -52,8 +52,7 @@ <h3>{{ .Title }}</h3>
 		{{ end }}
 		</a>
 		{{ end }}
-		<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLScuI7Ye3VQHQTwBASrgkjQDSS5TP0g3AXfFhwSM9YpHgxRKFA/viewform" class="tell-your-story"><img height="127px"src="/images/case-studies/story.svg" alt="{{ T "layouts_case_studies_list_tell" }}"></a>
-	</div>
+		<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLScuI7Ye3VQHQTwBASrgkjQDSS5TP0g3AXfFhwSM9YpHgxRKFA/viewform" class="tell-your-story">{{ T "layouts_case_studies_list_tell" }}</a>	</div>
 </section>
 {{ .Content }}
 {{ end }}

static/css/gridpage.css

@@ -161,9 +161,19 @@ p.attrib {
 }
 
 .tell-your-story {
-    border: 1px solid #dddddd;
-    border-radius: 6px;
-    box-shadow: 1px 2px 2px #dddddd;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 50px;
+    font-weight: 1000;
+    font-size: x-large;
+    background: #847f7f33;
+}
+.tell-your-story:hover {
+    background: #847f7f66;
+    transform: perspective(1000px) rotateY(10deg);
+    transition: transform 0.5s;
 }
 
 .gridPage .feature {