Styled Buttons within HTML Code Element

laterrarossa · January 26

Good evening,

I run a coffee business, so my website includes brew guide pages for various brewing methods, and as a part of the page, I have added a timer that may be used in line with the guide for timing each step, but I would love to style the shape, colour, and fonts of the buttons to match our branding. I have tried to create a modifier or style section within the code to adjust the corner radius, but nothing seems to work. Can anyone point me in the right direction? I have included the html for the code embed below for reference:

<html lang = "en">
    <head>
       <title>Stopwatch</title>
    </head>
    <body>
        <div><strong>Seconds:</strong> <span id="time">0</span></div>
        </center><input type="button" id="startTimer" value="Start" onclick="start();">
        <input type="button" id="stopTimer" value="Pause"  onclick="stop();">
        <input type="button" id="resetTimer" value="Clear"  onclick="reset();">
    <script>
            var timeElapsed = 0;
            var timerID = -1;
            function tick() {
                timeElapsed++
                document.getElementById("time").innerHTML = timeElapsed;
            }

            function start() {
                if(timerID == -1){
                    timerID = setInterval(tick, 1000);
                }
            }

            function stop() {
                if(timerID != -1){
                    clearInterval(timerID)
                    timerID = -1
                }
            }

            function reset() {
                stop();
                timeElapsed = -1;
                tick()
            }
        </script>
    </body>
</html>

Thank you all.

Ziggy · January 26

Can you share the web page URL?

laterrarossa · January 26

@Ziggy Thank you so much. The page url is https://laterrarossa.com/aeropress

Ziggy · January 27

Try adding this to your code and adjust the colors and add any of changes to the design:

<style>
  input[type="button" i] {
    background-color:none !important;
    border-color:#c86748 !important;
  }
</style>

laterrarossa · January 28

@Ziggy Thank you so much! That worked perfectly. I made some UI tweaks and will probably keep working on it, as I would love to add minutes and stages, with instructions to the timers, but this made it look so much better, so thank you again. I really do appreciate it.

sayreambrosio · January 28

26 minutes ago, laterrarossa said:

@Ziggy Thank you so much! That worked perfectly. I made some UI tweaks and will probably keep working on it, as I would love to add minutes and stages, with instructions to the timers, but this made it look so much better, so thank you again. I really do appreciate it.

Can I ask what chat service you are using? The branding on it is great!

laterrarossa · January 28

@sayreambrosio I am using a WhatsApp Business chat plug-in from Elfsight Apps. I then customized the colours to match my brand as well as added custom wording and my memoji from Apple.

https://apps.elfsight.com/panel/applications/whatsapp-chat/

sayreambrosio · January 28

10 minutes ago, laterrarossa said:

@sayreambrosio I am using a WhatsApp Business chat plug-in from Elfsight Apps. I then customized the colours to match my brand as well as added custom wording and my memoji from Apple.

https://apps.elfsight.com/panel/applications/whatsapp-chat/

Thank you 🙂 I'll have to check it out. Love the site by the way. Coffee Addict/Snob here.

laterrarossa · January 28

@sayreambrosio You're so welcome and thank you! I will be adding a new decaf this week and a new Rwandan coffee next month : )

Elfsight · February 17

Hello @laterrarossa👋

Thanks a million for sharing your experience using Elfsight apps❤️

If any question come up, please do not hesitate to contact us. We'll be more than happy to help!

Regards,

Elfsight Team

Explore all Elfsight widgets — Widget Catalog
Communicate and learn — Elfsight Community Forum

laterrarossa · March 6

You're welcome and thank you for your apps. They have been a huge help!

Styled Buttons within HTML Code Element

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ziggy

Ziggy

laterrarossa

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources