Menu icon Foundation
Rounded buttons in Inky HTML?

Hey everyone, new to the framework and I can't seem to find anything in the docs showing how to get a rounded button going in the Sass workflow. The pre-set $button-radius in the default _settings.scss does not seem to apply correctly. When I inspect the css, I see that "border-radius: 3px" is being applied to the link text but not to the parent table of the button (which results in the desired rounding).

 

border radius

Is there an additional class I need to call in my Inky HTML to get the button displaying with this rounding? (This should probably be a doc example, no?) Or something else I need to do to get the $border-radius pre-set applying further up to the parent element?

My index.html file looks like this:

 

<row>
    <columns small="12" large="12">
      <center>
        <button href="http://myurl.com/">Click here for a special offer on our courses.</button>
      </center>
    </columns>
  </row>
  <hr>

etc...

button

Hey everyone, new to the framework and I can't seem to find anything in the docs showing how to get a rounded button going in the Sass workflow. The pre-set $button-radius in the default _settings.scss does not seem to apply correctly. When I inspect the css, I see that "border-radius: 3px" is being applied to the link text but not to the parent table of the button (which results in the desired rounding).

 

border radius

Is there an additional class I need to call in my Inky HTML to get the button displaying with this rounding? (This should probably be a doc example, no?) Or something else I need to do to get the $border-radius pre-set applying further up to the parent element?

My index.html file looks like this:

 

<row>
    <columns small="12" large="12">
      <center>
        <button href="http://myurl.com/">Click here for a special offer on our courses.</button>
      </center>
    </columns>
  </row>
  <hr>

etc...
Ian Daly over 3 years ago

Here is the scss to make round buttons, and also remove the border. not sure why it doesnt work from the settings file but just add this to your app.scss and you should be good.

 

.button {
	td {
		border-radius: 30px;
		border: 0px solid transparent !important;
	}
	a {
		text-align: center;
	}
}

Rafi Benkual over 3 years ago

Good answer Ian! You can also use border-radius: 50%; 

 

One thing to note is that rounded buttons are a progressive enhancement and don't work on all email clients. Also the border will need to be removed Like Ian mentioned.

c s over 3 years ago

Thanks guys. I'm guessing this might have had something to do with setting the border transparent. Did not realize I needed to do that as well...