Title: Hover in CSS Last modified: August 31, 2016 --- # Hover in CSS * Resolved [samtazbu](https://wordpress.org/support/users/samtazbu/) * (@samtazbu) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/) * Dear Ben, * I hope this finds you well! * I am finally getting a better idea of how to do small things in CSS. * I am trying to create a CSS code for some of my links with hover, for which I was using image blocks and a plugin so far. * See the following page: * [http://www.samvriti.com/tests-hover-css/](http://www.samvriti.com/tests-hover-css/) * First half: images + plugin. Second half: CSS. * The CSS have I used: * ``` .background-switch { text-align: center; max-width: 300px; margin-left: auto ; margin-right: auto ; padding: 1em; border-radius: 30px; border: 1px solid #f4f4f4; background-color: white; } .background-switch:hover { color: #7B7B7B; background-color: #141414; transition: width 2s; transition-timing-function: linear; } ``` * A few things I am not yet able to figure out: * – Which exact tag am I to add to make the whole block as link (and then possibly adding further css functions for link, visited, over, active), instead of the text within? And/or, to cancel the hover style for text, if this text is placed in this background hover change? * – How to apply at once a flexible width, which would define itself according to the length of the text each time, but also so that the whole background remains centered in the page? It seems it is either/or with the present code ( margin- left: auto ; and margin-right: auto ; seem to require a fixed max-width). * Thanks Ben ! * Samuel Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/hover-in-css-1/page/2/?output_format=md) [→](https://wordpress.org/support/topic/hover-in-css-1/page/2/?output_format=md) * [Softound Solutions](https://wordpress.org/support/users/softound/) * (@softound) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210139) * Hi Samuel, * Still do you need the **h2** tag out side of **anchor** tag ? * Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/) * (@samtazbu) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210172) * Hi ! * Well, I am not sure. Are you suggesting instead that I apply a font + font size + line spacing identical to h2, in the css code of this

element? * In other words, is the background coding through CSS cleaner if I stick to a

element, and not apply it according to each case, to texts of various heading levels? * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210248) * Hey Samuel, * To make buttons like these, you can all the styling directly to the `a` element. You can also create this effect without the use of any images. * Check out this CSS: * ``` .button-link { display: inline-block; padding: 6px 18px; border: solid 1px #333; border-radius: 6px; transition: all 0.2s ease; } .button-link:hover, .button-link:active, .button-link:focus { background: #333; color: #fff; } ``` * You would add the “button-link” class to any link you want styled like a button. * Links are normally inline elements, so the first thing it does is make it an inline-block element so the padding can be applied. Using padding instead of defining a size allows the button shape to fit any amount of text. Then there is a border added and the corners are curved with border-radius. For good measure, a transition is added for hover effects to make it smoother. * On the hover (and :active and :focus), the background is changed to a dark gray and the font is switched to white. * Let me know if I missed any part, but this should get you a good ways there. * Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/) * (@samtazbu) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210274) * Hi Ben ! * Great – this is very insightful, and with a few tweaks I could reach what I am looking for. * Only one point left: how to make the inline-block always centered? I tried adding the line * `text-align: center;` * in the css code, but it is not changing anything… * Would * `float: center;` * be a good solution? * Thanks again! * Samuel * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210291) * Sure thing! * To center an inline-block, you’ll need to add `text-align: center` to the parent element. In your example, this would mean adding it to the h2 elements containing the buttons. You could add a class called something like “button-container” to these h2 elements to then give them the centered text. * Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/) * (@samtazbu) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210311) * Thanks Ben, great! * I also might want to set a related class for those buttons whose width I would like to define as fixed – for instance in the case of several buttons following each other ; then varying widths may look strange. * I tried the following, adding the `max-width` line and changing the `padding` line with codes that were working as I used the previous CSS (before your first response) – but it does not seem to be working now: * ``` .button-link-fixed { float: center; display: inline-block; max-width: 300px; padding: 0.7em; border: solid 1px #f4f4f4; border-radius: 30px; transition: all 0.2s ease; text-decoration: none; } .button-link-fixed:hover, .button-link-fixed:active, .button-link-fixed:focus { background: #141414; color: #7B7B7B; } ``` * Where is my mistake…? * Thanks ! * Samuel * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210319) * I think the issue is that the `max-width` value is greater than the current button width, so it isn’t restricting the size. * You could set the `width` explicitly instead the size you want the buttons to be. The padding can then be kept on the top and bottom only like this: * ``` .button-link-fixed { padding: 0.7em 0; width: 250px } ``` * Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/) * (@samtazbu) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210320) * Hi Ben! * I added the two new lines you are suggesting in the CSS code I sent in the previous message, so now it looks like this: * ``` .button-link-fixed { float: center; display: inline-block; padding: 0.7em 0; width: 250px border: solid 1px #f4f4f4; border-radius: 30px; transition: all 0.2s ease; text-decoration: none; } .button-link-fixed:hover, .button-link-fixed:active, .button-link-fixed:focus { background: #141414; color: #7B7B7B; } ``` * but it is giving unwanted results: * [http://www.samvriti.com/tests-hover-css/](http://www.samvriti.com/tests-hover-css/) * It looks like the padding left and write, the centering (though added manually to the html) and the `text-decoration: none` seem cancelled… I probably made a mistake in adding those lines in the css? * Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/) * (@samtazbu) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210321) * My bad Ben, I hadn’t saved the new CSS modifications. * The result is still a little weird: no top and bottom padding, the centering tag does not seem to apply, and the text-decoration: none is not followed. * Thanks for your time! * Samuel * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210323) * Woops I’m sorry I didn’t leave a semi-colon after the width value which is in your code now. Try adding that missing semi-colon and the CSS should then work normally. * Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/) * (@samtazbu) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210339) * Hi Ben, * I did add it, but it still looks odd… Let me know if that can be fixed? * Samuel * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210340) * If you move the “button-link-fixed” class to the link element, this will help. The whole button will be clickable this way, rather than the link part within the button. A separate class can be given to the h2 element to add the `text- align: center;` code needed to center the anchor text. * The padding has an extra 0 on it right now: * `padding: 0 0.7em 0;` * This says no padding on the top and bottom, only on the sides. Remove the first zero, so it reads like this: * `padding: 0.7em 0;` * That says to add padding to the top/bottom, but not left/right. * Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/) * (@samtazbu) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210347) * Thanks Ben for the wonderful explanations. It is working perfectly now. It’s a pleasure learning with you! Thanks again, * Samuel * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210348) * That’s great, glad to hear it! Let me know if anything else comes up. * Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/) * (@samtazbu) * [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/#post-7210349) * Hi Ben, * Yes indeed! A little something came up 🙂 * I tried adding a darker shade of grey for the text in the box, by default: * `font-color: #3C3C3C;` * It is darker than the colour on hover, which I wish to keep: * `font-color: #7B7B7B;` * The css line does not seem tricky to the least, so I am not sure why it is not applying… * You can see for instance the difference between the image files I had used initially, and the “.button-link-fixed” CSS class below it: * [http://www.samvriti.com/tests-hover-css/](http://www.samvriti.com/tests-hover-css/) * Thank you! * Samuel Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/hover-in-css-1/page/2/?output_format=md) [→](https://wordpress.org/support/topic/hover-in-css-1/page/2/?output_format=md) The topic ‘Hover in CSS’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/tracks/1.81/screenshot.png) * Tracks * [Support Threads](https://wordpress.org/support/theme/tracks/) * [Active Topics](https://wordpress.org/support/theme/tracks/active/) * [Unresolved Topics](https://wordpress.org/support/theme/tracks/unresolved/) * [Reviews](https://wordpress.org/support/theme/tracks/reviews/) * 20 replies * 3 participants * Last reply from: [Ben Sibley](https://wordpress.org/support/users/bensibley/) * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/hover-in-css-1/page/2/#post-7210360) * Status: resolved