I found this awesome CSS code and what to use it on my website. But because I have to generate a lot of buttons with PHP I need to write the CSS inline as style="..." for the button. My question now is, how can I convert that to inline CSS?

I already googled for an converter but sadly I didn't find anything.

I found this awesome CSS code and what to use it on my website. But because I have to generate a lot of buttons with PHP I need to write the CSS inline as style="..." for the button. My question now is, how can I convert that to inline CSS?

I already googled for an converter but sadly I didn't find anything.

• javascript
• jquery
• html
• css

• do you mean how do you take the SCSS and make it real CSS? is there no way to generate classes on the buttons so you don't have to do all of that as inline styles? Would you be able to replicate the HTML in the same way? a <span> inside a <a>? – bjornmeansbear Commented Sep 14, 2017 at 1:54
• SO does not allow us to remend software. Also, on SO, you are expected to try to write the code yourself. After doing more research if you have a problem you can post what you've tried with a clear explanation of what isn't working and providing a Minimal, Complete, and Verifiable example. – Rob Commented Sep 14, 2017 at 3:05
• You can explore UnCSS and other critical CSS tools, (P)React / VueJS and other CSS in JS (with server-side rendering?), Atomic CSS, emogrifier and CssToInlineStyles (C#). /!\ Neither MQ nor hover/focus and :pseudo styles in a style attribute (Atomic CSS has a solution for that by using classes). Though I'm curious what is the problem with the Pen you linked to that would need inline styles? – FelipeAls Commented Sep 14, 2017 at 9:35
• Does this answer your question? Convert internal stylesheet to inline css – Clément Commented Jul 17, 2021 at 23:37

6 Answers 6

You could put it at the top of your file surrounded by style tags.

It would then affect just that file given the associated classes were on the elements meant to be affected.

<style>
//css code goes here
</style>

EDIT:

If you specifically want it to be inline and dont want to type it manually then you would either have to find or write a tool that will add run a post process on it. Writing this correctly would be a challenge but Gulp might be your friend.

are you looking for something like this?

<button style="background: blue; color: black; font-size: 15px">Im a button</button>

The CSS would look like this:

.button {
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
  position: relative;
  padding: 3px;
  display: inline-block;
  border-radius: 7px;
}

.button span {
  display: inline-block;
  background: #191919;
  color: white;
  text-transform: uppercase;
  padding: 2rem 5rem;
  border-radius: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 800;
  font-size: 3rem;
}

which means the html with inline styles would be:

<a href="#" style="background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);position: relative;padding: 3px;display: inline-block;border-radius: 7px;">
    <span style='display: inline-block;background: #191919;color: white;text-transform: uppercase;padding: 2rem 5rem;border-radius: 5px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight: 800;font-size: 3rem;'>Button</span>
</a>

You'd have to switch the background on the .button span is the right #hex color but that's roughly what you'd need.

Your can try this as you said using Jquery :

$("button#id_name").css('background-color','red'); //<button id="id_name" ..>
$("input[type='submit']").css("background-color','red');// <input type="submit" .../>
$("a#id_name").css("background-color','red');// <a href="#" id="id_name" ..>

I guess is only for one button, that the reason why i didn't call attribute class.

Use a task automation tool or any server-side programming language. We may need to implement in either way.

Declare some variables.

my_button = '''
border: 0px;
  background: none;
  position: fixed;
  bottom: 23px;
  right: 28px;
'''

and use pattern matching to replace.

html = '''

<input type='button' style='$my_button'>

'''

You can use this if you have multiple line css:

$('#button-id').css({
       'property1': 'value1',
       'property2': 'value2'
});