How to create a button over a link?

[stroutman81]

How do you transform a general link into a button? I have a jump link on my page that takes you to a section further down below. I'd like to "pretty it up" by making it a blue button, but have no clue where to start.

Any help would be greatly appreciated.

Thanks

http://dev.body-improvements.com/online-fitness-coaching/

[Victor Font]

It's all done with CSS. Create a class and assign it to the link. This is the code I use on my site.

a.button {
	border: 3px solid #fff;
	color: #fff !important;
	background-color: orange;
	background: transparent;
	clear: both;
	font-family: Montserrat, sans-serif;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 1px;
	margin-top: 20px;
	padding: 15px 25px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.1s ease-in-out;
	text-decoration: none;
}

Then, if you want the color to change when a person hovers over it:

a.button:hover {
	background-color: #fff;
	color: #000 !important;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[stroutman81]

Thanks for the information. Would you believe that I've gotten as far as I have so far with this site without knowing a thing about CSS? Do I copy and paste that code in appearance -> custom css?

[Brad Dalton]

You can add

class="button"

to the HTML link

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Like this https://gist.github.com/braddalton/6404bf0fa21a23fcfcb62a9acff3e335

---

Tutorials for StudioPress Themes.

[stroutman81]

Worked perfectly! Thanks so much.

[Author]

Posts