# CSS for Edit Button!

**URL:** https://community.glideapps.com/t/css-for-edit-button/20648
**Category:** Ask for Help
**Created:** [January 3, 2021, 6:53am UTC](https://community.glideapps.com/t/css-for-edit-button/20648 "2021-01-03T06:53:33Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [January 3, 2021, 6:53am UTC](https://community.glideapps.com/t/css-for-edit-button/20648/1 "2021-01-03T06:53:33Z")

</div>

Hi Gliders,

Can anyone help me with a CSS to alter the edit pencil icon into a button or increase its icon size.

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/2/4278635ff39ebea054f5a40298fa5f1d45344b51.png)

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [January 3, 2021, 8:05am UTC](https://community.glideapps.com/t/css-for-edit-button/20648/2 "2021-01-03T08:05:19Z")

</div>

This is what i can so far. But the issues is, the button is now moving with the viewport ☹ . I want to button to be in one place

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/a/5aaccdae631c4b6aed11be35df33552ccd5702aa.png)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/4/e4b3d937cffd4631f1237741b618b46180828a74.png)

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [January 3, 2021, 8:08am UTC](https://community.glideapps.com/t/css-for-edit-button/20648/3 "2021-01-03T08:08:51Z")

</div>

Rather than messing around with CSS, have you considered using floating buttons for Add/Edit actions?

![Screen Shot 2021-01-03 at 4.07.35 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/4/2482d2e42d466c6db7ff42d32ce3b1c5efb82e3e.png)

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [January 3, 2021, 8:10am UTC](https://community.glideapps.com/t/css-for-edit-button/20648/4 "2021-01-03T08:10:35Z")

</div>

Hi @Darren_Murphy, This is what i wanted to do, but there wasn’t any option to edit, can you let me know to i can get the edit option?

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [January 3, 2021, 8:13am UTC](https://community.glideapps.com/t/css-for-edit-button/20648/5 "2021-01-03T08:13:57Z")

</div>

The way I did it was with a Link to Screen action, passing ‘This Item’ as the data.

![Screen Shot 2021-01-03 at 4.12.04 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/9/79c7e1cbbf586ea7cb4f9ad45c4ea91ca7d64a94.png)

On the next screen, you just use a Details layout, and add input components for those items you want to make available to be edited.

Of course, you could also use standard buttons with this, but I think it’s a nice use case for floating buttons.

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [January 3, 2021, 8:18am UTC](https://community.glideapps.com/t/css-for-edit-button/20648/6 "2021-01-03T08:18:58Z")

</div>

Thanks. Will try it out