Change the button look with CSS?

  • Resolved antdx

    (@antdx)


    3 years, 3 months ago

    I want to make the Listen button look better. Can you make it where I can adjust the CSS?

I know you can type CSS but it doesn't work:

.listen-btn {
padding: 8px 16px;
border: 1px solid #000;
border-radius: 4px;
background-color: #fff;
color: #000;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
cursor: pointer;
transition: all 0.2s ease-in-out;
}

.listen-btn:hover {
background-color: #000;
color: #fff;
}

What are you supposed to put in the CSS area?
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Azizul Hasan

    (@hasanazizul)

    3 years, 3 months ago

    Hi @antdx ,

    Your css is ok, but one thing here missing. That is selector. The selector should like this

    #tta__listent_content_1.tta__listent_content {
padding: 8px 16px;
border: 1px solid #000;
border-radius: 4px;
background-color: #fff;
color: #000;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
cursor: pointer;
transition: all 0.2s ease-in-out;
}

#tta__listent_content_1.tta__listent_content:hover {
background-color: #000;
color: #fff;
}

    Here you can see how the button is look like after applying your css

    Thread Starter antdx

    (@antdx)

    3 years, 3 months ago

    ty nice, also can you make it where you can have the tta place on that paragraph block it is in and not the others?

    There should be an option for a button to play the whole page or just that block. Also, each button would need a label but it would also be nice to know what the select ID is for that CSS on the next update for each button.

    I want to have multiple tta reading for each block (1 tta per block, multiple on same page and they play separately and at the same time too where it doesn’t cut the other one off either through pausing, stopping, etc. when you play that) it is in rather than having to make multiple pages to do a playback of 1 paragraph or so.

    • This reply was modified 3 years, 3 months ago by antdx.
    • This reply was modified 3 years, 3 months ago by antdx.
    • This reply was modified 3 years, 3 months ago by antdx.
    • This reply was modified 3 years, 3 months ago by antdx.
    Plugin Author Azizul Hasan

    (@hasanazizul)

    3 years, 3 months ago

    if you have multiple buttons in one page you have to update the CSS selector

    for example it you have 2 button in one page the your selector will look like this

    #tta__listent_content_1.tta__listent_content,
#tta__listent_content_2.tta__listent_content:hover, {
   // your CSS
}

#tta__listent_content_1.tta__listent_content:hover,
#tta__listent_content_2.tta__listent_content:hover, {
  // your CSS
}

    just like this you can add as many as buttons and customize it.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Change the button look with CSS?’ is closed to new replies.

Tags