Button Styles Code

Hi everybody, its me again!

I want to change the button styles of my website.

Please help me about this, thank you!!

hello

you can make a request in our graphic request section
be sure to read first the rules

Which buttons are you referring to:  forum icons, new post, send, etc.?

SLGray wrote:Which buttons are you referring to:  forum icons, new post, send, etc.?

I need to forum icons button for my homepage, I want to change all of button dsigns and want to smart and soft pagewiew...

we have hundreds of buttons here >> Buttons maybe you can find something you like there or you can tell us what will match with a little change.

Sadly we can't read minds so you will have to show us some more info about colours and shape and how big also

What buttons do you want changed also a screen shot will help us more,

APE wrote:we have hundreds of buttons here >> Buttons maybe you can find something you like there or you can tell us what will match with a little change.

Sadly we can't read minds so you will have to show us some more info about colours and shape and how big also

What buttons do you want changed also a screen shot will help us more,

Oh, if you help me clearly I'll be really thankful to you, I have premium package but forum view style is not good for me...
I need to really soft and basic style...
This is my forum adress; http://www.superjuniorturkey.com/

I want to change categories icon size and style but forum size is always minimized all of my categories icons that...



And I want to change all of click button styles, where can I find all of buttons setting codes?

yumm wrote:

APE wrote:we have hundreds of buttons here >> Buttons maybe you can find something you like there or you can tell us what will match with a little change.

Sadly we can't read minds so you will have to show us some more info about colours and shape and how big also

What buttons do you want changed also a screen shot will help us more,

Oh, if you help me clearly I'll be really thankful to you, I have premium package but forum view style is not good for me...
I need to really soft and basic style...
This is my forum adress; http://www.superjuniorturkey.com/

I want to change categories icon size and style but forum size is always minimized all of my categories icons that...



And I want to change all of click button styles, where can I find all of buttons setting codes?

Oh, I'm sorry but this problem did'nt solved me yet. I want to only ask how can I sized categories icon size? Because its minimized and be low quality every time...

try 

Code:


ul.forums li.row dl {
  background-size: Xpx Xpx!important;
}


replace X with a number --> 20px

skouliki wrote:try 

Code:


ul.forums li.row dl {
  background-size: Xpx Xpx!important;
}


replace X with a number --> 20px

Thank you, very useful!

Lastly I want to change button hover efects... ^^ For example, more soft and slowly button hover effects like forumotion buttons'... The buttons are like this in my forum... You can check my current button styles from modernBB forum's new topic button...

i dont have access as a guest to view the new topic button
can you post a link that guests can see at least one button

skouliki wrote:i dont have access as a guest to view the new topic button
can you post a link that guests can see at least one button

Oh, I'm sorry, here... ^^

http://www.superjuniorturkey.com/f5-elf-fan-calsmalar

Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}

Change this to the colour you want.

Code: background-color: #d31141;

and this part to speed it up or slow it down on hover

Code: transition: 300ms;

APE wrote:

Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}

Change this to the colour you want.

Code: background-color: #d31141;

and this part to speed it up or slow it down on hover

Code: transition: 300ms;

Oh, thank you this is really useful code too...

Can we change to hover style like this link? https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_fade

And I want to change this effects too...

The images you put are not visible upload them with servimg better

skouliki wrote:The images you put are not visible upload them with servimg better

Oh really? But I thought servimg did'nt upload to gifs...

So you want to change the hover color from light blue ro light gray?

SLGray wrote:So you want to change the hover color from light blue ro light gray?

Color is not important, I want to only hover style, because when I'll change to theme color, it will change too... ^^

try replacing this

Code:


.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}


with this

Code:


.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {opacity: 1}



skouliki wrote:try replacing this

Code:


.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}


with this

Code:


.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {opacity: 1}



Sorry, its look like this...

replace this

Code:


.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}


with this

Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #4065A1;
    box-shadow: 0 1px 9px rgba(0,0,0,0.6);
    transition: 0.3s;
    opacity: 0.6;
cursor: pointer;
}


skouliki wrote:replace this

Code:


.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #d31141;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
transition: 300ms;
}


with this

Code:

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
background-color: #4065A1;
    box-shadow: 0 1px 9px rgba(0,0,0,0.6);
    transition: 0.3s;
    opacity: 0.6;
cursor: pointer;
}


Thank you so much, but its same like current button...

the blue changes with opacity like the one you show us
You result do you want when you hover the button? Cause the link you provide shows this fade effect
If you want the button not to fade but change color thats diffrent

skouliki wrote:the blue changes with opacity like the one you show us
You result do you want when you hover the button? Cause the link you provide shows this fade effect
If you want the button not to fade but change color thats diffrent

Oh, okay there is no problem, this problem solved for me, thank you so much.