# Display text in pane reopen button vertically

**URL:** <https://community.elfsight.com/t/display-text-in-pane-reopen-button-vertically/47943>\
**Category:** Forms\
**Created:** [April 17, 2024, 11:56am UTC](https://community.elfsight.com/t/display-text-in-pane-reopen-button-vertically/47943 "2024-04-17T11:56:39Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 17, 2024, 11:56am UTC](https://community.elfsight.com/t/display-text-in-pane-reopen-button-vertically/47943/1 "2024-04-17T11:56:39Z")

</div>

Add the code below to the Custom CSS field on your [Form](https://elfsight.com/widgets/?category=forms) widget’s Appearance tab:

```auto
.global-styles,
[class*='ButtonBase__Ellipsis-sc'] {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.global-styles,
[class*='ButtonBase__Overlay-sc'] {
  display: flex;
  flex-direction: column-reverse;
}

.global-styles,
[class*='FloatingButton__FloatingButtonContainer-sc'] {
  transform: rotate(0deg) translateY(50%);
}

.global-styles,
[class*='FloatingButton__FloatingButtonContainer-sc']
  [class*='ButtonBase__ButtonIcon-sc'] {
  margin: 4px 0 0 !important;
}

.global-styles,
[class*='FloatingButton__FloatingButtonContainer-sc']
  [class*='ButtonBase__Overlay-sc'] {
  padding: 16px 10px !important;
}

.global-styles,
[class*='FloatingButton__FloatingButtonContainer-sc']
  [class*='ButtonBase__ButtonContainer-sc'] {
  border-radius: 0 4px 4px 0 !important;
}

```

  

Guys, if this code was helpful to you, please drop a line in the comments. Your feedback helps us improve our services and provide better solutions 🙂