CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ChantelleWedel
ChantelleWedel

Reputation: 95

Convert CSS to inline CSS?

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.

Upvotes: 3

Views: 20207

Answers (6)

kta
kta

Reputation: 20110

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'>

'''

Upvotes: 0

vikvincer
vikvincer

Reputation: 649

You can use this if you have multiple line css:

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

Upvotes: -2

Jasper Jalago
Jasper Jalago

Reputation: 31

are you looking for something like this?

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

Upvotes: 3

rjustin
rjustin

Reputation: 1439

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.

Upvotes: 3

user8556290
user8556290

Reputation:

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.

Upvotes: 0

bjornmeansbear
bjornmeansbear

Reputation: 98

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.

Upvotes: 1

Related Questions