# Align emdedded button to the left

**URL:** <https://community.elfsight.com/t/align-emdedded-button-to-the-left/38109>\
**Category:** Button\
**Created:** [January 19, 2024, 6:27pm UTC](https://community.elfsight.com/t/align-emdedded-button-to-the-left/38109 "2024-01-19T18:27:09Z")\
**Posts on this page:** 3\
**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:** [January 19, 2024, 6:27pm UTC](https://community.elfsight.com/t/align-emdedded-button-to-the-left/38109/1 "2024-01-19T18:27:09Z")

</div>

Add this code to the Custom CSS field on the Design tab of your [Button](https://elfsight.com/button-widget/) widget’s settings:

```auto
[class*="ButtonBase__ButtonContainer"] {
align-self: flex-start;
}

```

---

<div class="post-metadata">

**Author:** ![Khush\_Jabble](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/khush_jabble/32/31740_2.png) [@Khush\_Jabble](https://community.elfsight.com/u/Khush_Jabble)\
**Post date:** [November 11, 2024, 2:56pm UTC](https://community.elfsight.com/t/align-emdedded-button-to-the-left/38109/2 "2024-11-11T14:56:26Z")

</div>

> [@Max](#):
>
> ```auto
> [class*="ButtonBase__ButtonContainer"] {
> align-self: flex-start;
> }
> 
> ```

PERFECT thanks MAX

---

<div class="post-metadata">

**Author:** ![Todd](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/todd/32/425_2.png) [@Todd](https://community.elfsight.com/u/Todd)\
**Post date:** [November 17, 2024, 11:39pm UTC](https://community.elfsight.com/t/align-emdedded-button-to-the-left/38109/3 "2024-11-17T23:39:22Z")

</div>

For those who want be able to align to the left or right, this should help:

- align-self: flex-start; aligns the element at the start of the cross-axis (left in this context).
- align-self: flex-end; aligns the element at the end of the cross-axis (right in this context).