WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#36553 closed enhancement (duplicate)

Extend the button-link class

Reported by: Cheffheid Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.6
Component: General Keywords:
Focuses: ui Cc:

Description

There are a fair amount of instances where links will need to be replaced by buttons (as part of #26504). In addition, they will need additional styling applied to make sure that the button looks and behaves like the link it's replacing (ie. the blue, with the underline, and the hover/focus colour change).

Instead of applying the same block of CSS to all of those instances individually, I'd like to propose a more generic extension to the existing button-link class with a "like-anchor" class (or whatever, not sold on that name) to mimic the default anchor style:

.wp-core-ui .button-link.like-anchor {
	color: #0073aa;
	text-decoration: underline;
	-webkit-transition-property: border, background, color;
	transition-property: border, background, color;
	-webkit-transition-duration: .05s;
	transition-duration: .05s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.wp-core-ui .button-link.like-anchor:hover,
.wp-core-ui .button-link.like-anchor:active {
	color: #00a0d2;
}

.wp-core-ui .button-link.like-anchor:focus {
	color: #124964;
	-webkit-box-shadow:
		0 0 0 1px #5b9dd9,
		0 0 2px 1px rgba(30, 140, 190, .8);
	box-shadow:
		0 0 0 1px #5b9dd9,
		0 0 2px 1px rgba(30, 140, 190, .8);
}

Attachments (1)

36553.patch (1.1 KB) - added by Cheffheid 4 years ago.

Download all attachments as: .zip

Change History (4)

@Cheffheid
4 years ago

#1 @Cheffheid
4 years ago

  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #35126.

#2 @Cheffheid
4 years ago

I'm blind, thanks to Andrea for pointing out there was already a ticket for this. Moving the patch there. :)

#3 @swissspidy
4 years ago

  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.