Reputation: 127

CSS hover styling on just the border of an object?

I'm having an issue customizing the CSS of some button widgets that came with a WordPress theme I'm running. I grabbed a quick screen capture video of what's happening because it's hard to describe.

Video Link: https://drive.google.com/open?id=1mYvOtAjz-0QnJYV3_nGYXnFoRpsRdVo_

The CSS I have applied on the buttons:

.lc_button {
    height: 100px !important;
    width: 200px !important;
    font-size: 18px !important;
    border: 1px solid #dd3333 !important;
    text-align: center;
    background-color: white;
    border-radius: 5%;
}

.lc_button:hover {
    background-color: white;
    border: 4px solid #dd3333 !important;
    color: #151515 !important;
}

.lc_button a:hover {
    color: #151515 !important;
}

Any idea what I have to do to get the inside to stay visible no matter where the cusror is at inside the button?

Thanks

Upvotes: 1

Answers (4)

Johnny Marvitz

Reputation: 181

The .css you've provided seems fully functional, and customizable. (aka, not broken, works fine).

The whole .css and the .html might shed some light on things without any "major alterations".

.lc_button {
    height: 100px !important;
    width: 200px !important;
    font-size: 18px !important;
    border: 1px solid #dd3333 !important;
    text-align: center;
    background-color: white;
    border-radius: 5%;
}
.lc_button:hover {
    background-color: white;
    border: 4px solid #0000ff !important;
    color: #00ff00 !important;
}
.lc_button a:hover {
    color: #151515 !important;
}

<body>
    <button class="lc_button">Test</button>
</body>

Upvotes: 1

BM RAFIQ

Reputation: 315

I've tried to solve your problem. I am successful. You can use this code of mine.

HTML

<div class="lc_button">
    <a href="#">Watch video</a>
</div>

CSS

    .lc_button a {
        display: block;
        width: 200px;
        height: 100px;
        line-height: 100px;
        font-size: 18px;
        font-weight: 700;
        color: #000000;
        border-radius: 5%;
        box-sizing: border-box;
        transition: 0.3s;
        background-color: white;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        position: relative;
    }
    .lc_button a:before {
        display: block;
        position: absolute;
        border-radius: 5%;
        left: 0;
        top: 0;
        content: "";
        width: 200px;
        height: 100px;
        box-sizing: border-box;
        border: 1px solid red;
        transition: 0.3s;
    }
    .lc_button a:hover:before {
        border: 4px solid red;
    }
    .lc_button a:hover {
        color: #151515 !important;
        background-color: #ffffff;
    }

.lc_button a {
		    display: block;
		    width: 200px;
		    height: 100px;
		    line-height: 100px;
		    font-size: 18px;
		    font-weight: 700;
		    color: #000000;
		    border-radius: 5%;
		    box-sizing: border-box;
		    transition: 0.3s;
		    background-color: white;
		    text-decoration: none;
		    text-transform: uppercase;
		    text-align: center;
		    position: relative;
		}
		.lc_button a:before {
			display: block;
			position: absolute;
			border-radius: 5%;
			left: 0;
			top: 0;
			content: "";
			width: 200px;
			height: 100px;
			box-sizing: border-box;
			border: 1px solid red;
			transition: 0.3s;
		}
		.lc_button a:hover:before {
		  	border: 4px solid red;
		}
		.lc_button a:hover {
		    color: #151515 !important;
		    background-color: #ffffff;
		}

<div class="lc_button">
    <a href="#">Watch video</a>
  </div>

Upvotes: 3

Hari17

Reputation: 489

This will help you to solve the problem...

button {
    height: 100px !important;
    width: 200px !important;
    font-size: 18px !important;
    border: 1px solid #dd3333 !important;
    text-align: center;
    background-color: white;
    border-radius: 5%;
}

button:hover {
    background-color: white;
    border: 4px solid #dd3333 !important;
    color: #151515 !important;
}

button a:hover {
    color: #151515 !important;
}

<div class="container">
  <button class="lc_button"><span>Hover Me</span></button>
  </div>

Upvotes: 0

Hari17

Reputation: 489

I've shared the code snippet..I think this will help you to solve the problem...

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  font-family: 'PT Sans', sans-serif;
  display: table;
  width: 100%;
  background: #f54785;
}
.container{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 100vh;
}
button{
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  margin: 20px 30px;
  background: rgba(0,0,0,0.09);
}
span{
  display: block;
  padding: 25px 80px;
}
button::before, button::after{
  content:"";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: #fff;
}

span::before, span::after{
  content:"";
  width:2px;
  height:0;
  position: absolute;
  transition: all 0.2s linear;
  background: #fff;
}
button:hover::before, button:hover::after{
  width: 100%;
}
button:hover span::before, button:hover span::after{
  height: 100%;
}
.btn-1::after{
  left:0;
  bottom: 0;
  transition-duration: 0.4s;
}
.btn-1 span::after{
  right:0;
  top: 0;
  transition-duration: 0.4s;
}
.btn-1::before{
  right: 0;
  top: 0;
  transition-duration: 0.4s;
}
.btn-1 span::before{
  left: 0;
  bottom: 0;
  transition-duration: 0.4s;
}

<div class="container">
  <button class="btn-1"><span>Hover Me</span></button>
  </div>

Upvotes: 0

CSS hover styling on just the border of an object?

Answers (4)

Related Questions