# E-Book by Glide. I tried to represent the new button bar with a small circle for page transitions

**URL:** https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478
**Category:** Project Showcase
**Created:** [January 21, 2021, 5:16am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478 "2021-01-21T05:16:11Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [January 21, 2021, 5:16am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/1 "2021-01-21T05:16:11Z")

</div>

Hi! All gliders.  
Can you tell me one?

I wanted to display the Button Bar in a small circle.  
I’m getting closer to my goal, but the code isn’t beautiful.  
I seem to need the help of a CSS magician.

 ![button bar](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/f/2f49a08175efa9abd107d6cc65b1bc82a0728dcf.png)

```
<pre><span><style>
.sc-bTJPMs.jrgmBT {
margin-top:-1%!important;
margin-left:35%!important;
width:105px !important;
}
[data-test="app-button-view"] {
border-radius: 50% !important;
}
```

---

<div class="post-metadata">

### Author: ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)
#### Post date: [January 21, 2021, 5:38am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/2 "2021-01-21T05:38:06Z")

</div>

@ThinhDinh@Lucas_Pires@Robert_Petitto are the CSS Experts.

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [January 21, 2021, 5:48am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/3 "2021-01-21T05:48:01Z")

</div>

Yes, I know.  
I am now waiting for the arrival of three musketeers.

---

<div class="post-metadata">

### Author: ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)
#### Post date: [January 21, 2021, 6:24am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/4 "2021-01-21T06:24:43Z")

</div>

@hisashi.fujita if you want to go the long way you can use an inline list and use some relevant images with e,g. Ratio 2:1.

Sounds as you are willing to use css (which I’m not into) so easier to wait for the css experts 🕶

Inspiration here:

> [@Upload multiple images to Cloudinary](https://community.glideapps.com/t/upload-multiple-images-to-cloudinary/13524):
>
> Intro I thought I was going to publish my first app in the Template store but external sources like Cloudinary integration are not allowed in a template. So after hours spend you will instead see the app here. Upload multiple images to Cloudinary Try out version: URL: [https://multiupload.glideapp.io/](https://multiupload.glideapp.io/) The app is using my personal Cloudinary account - so please keep uploads in the app low - and use your own Cloudinary account if you are going to do exploration of cloudinary Backg…

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [January 21, 2021, 6:40am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/5 "2021-01-21T06:40:47Z")

</div>

Thank you @Krivo.

My purpose is to realize a button with Prev / Next function.  
In the new button bar, we have adopted it because we can give each action to two buttons.  
And I’m trying to make the button small and unobtrusive.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 21, 2021, 3:13pm UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/7 "2021-01-21T15:13:50Z")

</div>

I had a look at this, but can’t seem to have a way around the class name. Not sure if anyone can figure out the class name for the button bar, would highly appreciate it. Looks like there’s only the class name for me.

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [January 21, 2021, 3:26pm UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/8 "2021-01-21T15:26:44Z")

</div>

The button bar doesn’t have a named class yet.  
 ![Screen Shot 2021-01-21 at 10.26.34 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/6/366aac997d1e85d8f849426b3a99102d2b71ff8c.png)

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [January 21, 2021, 3:29pm UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/9 "2021-01-21T15:29:07Z")

</div>

app-button-view doesn’t work?

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [January 21, 2021, 3:29pm UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/10 "2021-01-21T15:29:35Z")

</div>

That’s for the button itself but not the bar

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [January 21, 2021, 3:37pm UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/11 "2021-01-21T15:37:58Z")

</div>

Right, just figured that might be enough to change a button shape. Haven’t tried it. Just spit-ballin.

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [January 22, 2021, 12:33am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/12 "2021-01-22T00:33:50Z")

</div>

Thanks [ThinhDinh](https://community.glideapps.com/u/ThinhDinh), [Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto), [Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager).  
I have to wait for a named class, right?  
I will try again when the class name is set.

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [January 22, 2021, 3:32am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/13 "2021-01-22T03:32:36Z")

</div>

I tried to express the new button bar with a small circle.  
Only one character should be used.  
With the help of [ThinhDinh](https://community.glideapps.com/u/ThinhDinh), we have achieved page transitions with Prev / Next.  
Once the class name is set, I think we can decorate it more.

 ![スクリーンショット 2021-01-22 12.36.41](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/f/ff724a68040bd2254d006a89fe23fc232b7d707e.jpeg)

> **[E-BOOK](https://capricious-drink-5433.glideapp.io/)**

```
<pre><span><style>
.sc-bTJPMs.jrgmBT {
margin-top: -1% !important;
margin-left: 36% !important;
width:28% !important;
}
[data-test="app-button-view"] {
border: 1px solid #ccc !important;
color: #ccc !important;
border-radius:50%;
}
```

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [January 22, 2021, 5:24am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/14 "2021-01-22T05:24:12Z")

</div>

@hisashi.fujita do you have any inspiration to decorate your buttons for?

Based on your inspirations we can achieve it

I tested the app now, and it’s cool yet

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [January 22, 2021, 9:59am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/15 "2021-01-22T09:59:56Z")

</div>

I am aiming to create an e-book using glide.  
Being able to upload manuscripts such as text and images from apps and G spreadsheets is very appealing to administrators.  
Previous / next page transition for that is a very important feature.

Currently, pages are laid out with CSS that allows you to build complex structures.  
We are waiting for the day when we can create a magazine screen with only the basic functions of Glide without using CSS.

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [January 25, 2021, 10:00am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/16 "2021-01-25T10:00:23Z")

</div>

I made some modifications.

★ Prev / Next function with button bar.  
★ Page transition directly with the choice component.

> **[E-BOOK](https://capricious-drink-5433.glideapp.io/)**

---

<div class="post-metadata">

### Author: ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)
#### Post date: [January 25, 2021, 1:03pm UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/17 "2021-01-25T13:03:30Z")

</div>

Very nice app. Creative homepage. Just an observation… how come the direct choice component has a “-“ as an option? Pressing the minus sign produces some strange on screen behavior.

Perhaps mark the component as “required”?

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [January 26, 2021, 12:47am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/18 "2021-01-26T00:47:17Z")

</div>

[Eric\_Penn](https://community.glideapps.com/u/Eric_Penn) Thanks for checking my app.  
Your advice is correct.

★ The Choice item has been changed to the “required” state.  
★ The tab at the bottom is hidden to make the UI of the app cleaner.

---

<div class="post-metadata">

### Author: ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)
#### Post date: [January 26, 2021, 5:55am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/19 "2021-01-26T05:55:19Z")

</div>

@hisashi.fujita very nice looking app 👍  
How much css did you have to do to obtain the layout?

---

<div class="post-metadata">

### Author: ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)
#### Post date: [January 26, 2021, 6:24am UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/20 "2021-01-26T06:24:19Z")

</div>

The page layout part uses a lot of CSS, as much as a regular HTML page.  
So why use glide? You might think that.  
It is mainly due to the following reasons.

★ Anyone can easily change the contents with a spreadsheet.  
★ And glide is PWA.

So for now, glide is the best choice for me.

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [January 26, 2021, 3:15pm UTC](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478/21 "2021-01-26T15:15:20Z")

</div>

Would love to see the css behind for both the titles in the top right of every image and off course the buttons and choice component moving between pages

[Next page](https://community.glideapps.com/t/e-book-by-glide-i-tried-to-represent-the-new-button-bar-with-a-small-circle-for-page-transitions/21478.md?page=2)