Jump to content

Can't figure out the style codes to edit this button

Recommended Posts

Is that your site or a site you want to emulate?

Either way it's a pants button.

However, if it were me I set the width/height of the button, add a border and then do radius:50%; All you then need to do is position the text in the centre.

But you are using Divi so anything you do is going to be yuk code. Divi really is the devil's spawn and should be expunged along with anything else Elegant Themes has created.

Share this post

Link to post
Share on other sites

(In vast majority of cases) Don't give button styles a width and a height, it's horribly fragile.  What if the text changes?  what if the text needs to wrap?
What you should do is instead give it some padding.  The only time a width should be give is when you want it to span the full width of it's container.


.btn {
  padding: 1em 2em;

.btn--full {
  width: 100%;
  text-align: center;

.btn--primary {
  // some cosmetic styling

Is suffice for basic button styling.  Of course if you want a perfectly round button then you need an explicit width and height and some way of vertically centering the text (display table or position absolute + transform: translate hacks).  This is still fragile however.

Edited by rbrtsmith

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Randallrbaker
      Here is my website. www.vibe432.com  please check every link and every possible page ans let ne know whats wrong. Id  evenlike to have the responsiveness looked at too. Im having someone do the css and html for me so i need to tell them exactly what wrong and why it's wrong. 
    • By 98sfsdf8
      Hi all,
      I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like:
      - to be able to have images of different heights and widths, not all the same size (as it is now).
      - vertically/horizontally centered.
      Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/
      <div id="contentwrapper">       <div class="centreme">         <img src="https://picsum.photos/200/200?image=1" id="animation" />         <img class="hidden" src="https://picsum.photos/200/200?image=1" />         <img class="hidden" src="https://picsum.photos/200/200?image=2" />         <img class="hidden" src="https://picsum.photos/200/200?image=3" />         <img class="hidden" src="https://picsum.photos/200/200?image=4" />         <img class="hidden" src="https://picsum.photos/200/200?image=5" />         <div id="bottommark"></div>       </div>     </div> CSS:
      body,       html {         height: 7000px;         margin: 0;         background-color: grey;       }       .hidden {         position: absolute;         top: -9999999px       }       #bottommark {         position: absolute;         bottom: 0;       }       #contentwrapper {         width: 100%;         height: 100%;         position: fixed;       }       .centreme {         position: fixed;         width: 200px;         /* the image width */         height: 200px;         /* the image height */         top: 50%;         left: 50%;         margin-top: -100px;         /* half the image height */         margin-left: -100px;         /* half the image width */       } JS:
      $(document).ready(function() { var a = $(document).height(); var b = a - $("#bottommark").position().top; $(window).scroll(function() { var e = $(document).height(); var f = $(window).scrollTop(); var c = e - $("#bottommark").position().top - f; var d = b / 5; $("span").html(c); if (c > d * 4) { $("#animation").attr("src", "https://picsum.photos/200/200?image=1") } if ((c < d * 4) && (c > d * 3)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=2") } if ((c < d * 3) && (c > d * 2)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=3") } if (c < d * 2 && c > d * 1) { $("#animation").attr("src", "https://picsum.photos/200/200?image=4") } if (c < d) { $("#animation").attr("src", "https://picsum.photos/200/200?image=5") } }) });  
    • By GrahamUK33
      I have created a few websites for personal hobbies, along the way I have gain some HTML & CSS skills. So I thought now is the time to look at creating a theme for WordPress. 
      So far, I have installed WordPress and created a page of content within the standard theme that came pre-installed. It all looks very alien now until I get my head around how it all works, how a theme is used, where it all the files are saved, etc. 
      I know about Treehouse, due to lack of finances I am left with looking at a Free learning solution. 
      Can anyone recommend any good videos that explain right from the start of what WordPress is, how it works, how to create a theme, etc.?
    • By charlyanderson
      Hello everyone :)
      I am working on a grid type layout and really having troubles and hoping someone might be able to help.
      The background colours should be full width whilst the content should be contained and have a max-width. I have managed to extend the background colours outside of the content areas by absolutely positioning them. This however, doesn't work when there is more than two blocks per row.
      I have attempted this about 20 times and cannot figure out how to achieve this on a responsive website. Can anyone help.
      Attached is a very basic example of what I am trying to achieve.
      Thanks in advance.

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts