1

I am using a circular button, border-radius:50%;

And I have an element inside of my element, in order to make the entire button clickable, and not just the content inside of my element.

When I add padding to the element, it makes it so that the entire button is clickable, but due to the fact that the border-radius is 50%, the corners of the button that shouldn't be clickable, are clickable.

I hope this outlines my problem enough, I'll include a jsfiddle if possible.

https://jsfiddle.net/nmcloota/7c95q1ov/5/

Nick
  • 155
  • 2
  • 11

2 Answers2

3

add overflow: hidden; to your parent button, so child's content will be hidden

button {
    height:200px;
    width:200px;
    background-color:gold;
    border-radius: 50%;
    overflow: hidden;
}

https://jsfiddle.net/nd5po7rg/1/ I updated your fiddle

EDIT: I applied some more styles to make text more centered take a look: https://jsfiddle.net/1fd5rksg/19/

marzique
  • 635
  • 1
  • 7
  • 17
2

Hi If I understand correctly, what you're looking for is something like that: 

// Show an element
var show = function (elem) {
 elem.classList.add('is-visible');
};

// Hide an element
var hide = function (elem) {
 elem.classList.remove('is-visible');
};

// Toggle element visibility
var toggle = function (elem) {
 elem.classList.toggle('is-visible');
};

// Listen for click events
document.addEventListener('click', function (event) {

 // Make sure clicked element is our toggle
 if (!event.target.classList.contains('toggle')) return;

 // Prevent default link behavior
 event.preventDefault();

 // Get the content
 var content = document.querySelector(event.target.hash);
 if (!content) return;

 // Toggle the content
 toggle(content);

}, false);
.toggle-content {
 display: none;
}

.toggle-content.is-visible {
 display: block;
}

button {
 height:200px;
 width:200px;
 background-color:gold;
 border-radius: 50%;
  cursor: pointer;

}
.with-padding {
 padding:50px;
}
   <button>
     <a class="toggle with-padding" href="#example">
       Click me to make my friend appear/disappear
     </a>
   </button>
   <button class="toggle-content" id="example">
        I am friend</button>

I hope this will help you.

rominakandrachoff
  • 19
  • 3