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

I can't see that button on the url you gave but this tip might help if you ever get stuck like this again: 

In Chrome hold CTRL+Shift and hit Delete,  you'll see Chrome Dev tools launch (see the screenshot). Now hover over / click on the button or whatever you want to find out about.

Dev tools will show you the code and the CSS:



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 Matcro
      Hi. I'm pretty new to web design, having taught myself Wordpress last summer and having worked with only a couple of themes/builders. I've recently been asked to do a bit of work on this site https://www.katerinasteventon.com/ (which uses Avada theme) and have done a few small bits but I can't find out how to remove the white area between the sliding banner and the navigation. Can't see any padding anywhere on various settings I've looked at.
      Any suggestions appreciated. Thank you.
    • By colinbrazier
      Hi everyone,
      My dropdown multi-level menu at www.fobgfc.org doesn't work with touch devices.  It doesn't drop down at all.  Basically because it makes use of :hover.
      I'd like the functionality to behave like the menu on www.chipsteadfc.org.uk
      I will consider using jQuery.  
      How's best to do this please?
    • By paul77uk
      Hey there ,Ive made lots of websites on the clearnet (this) using html ,wordpress and joomla but 
      Ive now started to make websites for customers on the dark net or deep web using my own server (laptop)
      I've installed apache2 and mysql and have some basic websites running through a torr proxy however
      when I try and use a cms like wordpress I get a lot of errors.
      Does anyone know of a free website script or cms for .onion websites ??
      There are cms made websites on the deep net but even looking at the source code doesn't reveal what they are .
    • By RobDoyle
      I am curious as to the difference between the two and when one should be used over the other. Thanks.
    • By Dragonknigh
      I'm trying to create this site and this is the code I have right now. How do I make a container and place it just like on the "this site"? How do I insert an image instead of  "go to site" button? And make it all responsive just like on "this site"?
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
    • Most Online

    Newest Member
  • Forum Statistics

    • Total Topics
    • Total Posts