border-right not at full height

Using this:

QPushButton:hover {
                  background-color: #666666;
                  border-right: 5px solid #3497D8;
              }

I have this:

enter a description of the image here

I want this:

enter a description of the image here

 0
Author: gil9red, 2019-10-10

2 answers

You set yourself an impossible task :) Look, maybe it will fit like this:

enter a description of the image here

from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtSvg import QSvgWidget, QSvgRenderer
from base64 import b64encode


def iconFromBase64(base_64):
    pixmap = QtGui.QPixmap()
    pixmap.loadFromData(QtCore.QByteArray.fromBase64(base_64), "SVG")
    icon = QtGui.QIcon(pixmap)
    return icon


class PushButton(QtWidgets.QPushButton):                          
    hover = QtCore.pyqtSignal(str)

    def __init__(self, parent):
        super(PushButton, self).__init__(parent)
        pass

    def enterEvent(self, event):
        self.hover.emit("#f00")

    def leaveEvent(self, event):
        self.hover.emit("#00f")     


class Ui_MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()

        self.pb = QtWidgets.QPushButton("", self, objectName="pb", clicked=self.onClick)
        self.pb.setGeometry(QtCore.QRect(0, 0, 100, 100))
        self.pb.setCheckable(True)

        self.pb_2 = PushButton(self)                               
        self.pb_2.setObjectName("pb_2")
        self.pb_2.setGeometry(QtCore.QRect(100, 100, 100, 100))
        self.pb_2.hover.connect(self.onHover) #svgColor)
# +        
        self.pb_2.setStyleSheet("""
            QPushButton:hover {
                background-color: #666666;
                border-right:  15px solid #3497D8;
                border-top:    50px solid #666666;
                border-left:   15px solid #666666;
                border-bottom: 50px solid #666666;      
            }
        """) 

        self.svgColor("#00f")
        self.set_icon()
        self.onHover("#00f")

    def onClick(self, state):
        if state: self.svgColor("#f00")
        else: self.svgColor("#00f")
        self.set_icon()

    def svgColor(self, color):
        self.svg_str = """
        <svg width="210pt" height="210pt" viewBox="0 0 210 210">
        <path fill="%s" opacity="1.00" d=" M 98.40 35.63 C 111.65 32.59 126.16 40.12 131.49 52.58 C 136.11 62.55 134.02 74.42 128.61 83.64 C 124.15 91.40 116.88 98.21 107.79 99.72 C 99.82 101.08 91.82 97.30 86.36 91.64 C 78.79 83.85 74.13 72.88 74.99 61.94 C 75.94 49.30 85.95 38.02 98.40 35.63 Z" />
        <path fill="%s" opacity="1.00" d=" M 61.84 109.81 C 74.62 106.15 87.71 102.93 101.06 102.60 C 99.42 118.09 97.06 133.51 95.27 148.98 C 95.06 150.30 95.92 151.44 96.44 152.58 C 99.06 157.18 101.67 161.78 104.39 166.32 C 107.41 161.59 110.17 156.70 112.88 151.80 C 113.76 150.47 113.66 148.84 113.47 147.33 C 111.62 132.42 109.51 117.54 107.82 102.61 C 121.22 102.92 134.33 106.17 147.15 109.84 C 151.24 111.19 155.73 112.06 159.07 114.97 C 161.95 117.47 162.87 121.37 163.27 125.01 C 165.05 141.64 166.93 158.27 168.77 174.90 C 125.92 175.12 83.07 174.96 40.22 174.98 C 41.72 159.42 43.69 143.91 45.28 128.35 C 45.85 124.11 45.87 119.31 48.91 115.95 C 52.21 112.23 57.33 111.28 61.84 109.81 Z" />
        </svg>
        """ % (color, color)    

    def set_icon(self):
        svg_base64_str = b64encode(self.svg_str.encode('utf-8'))      
        self.icon = iconFromBase64(svg_base64_str)          
        self.pb.setIcon(self.icon)
        self.pb.setIconSize(QtCore.QSize(50, 50))    

    def onHover(self, color):
        self.svgColor(color)
        svg_base64_str = b64encode(self.svg_str.encode('utf-8'))      
        self.icon = iconFromBase64(svg_base64_str)   
        self.pb_2.setIcon(self.icon)
        self.pb_2.setIconSize(QtCore.QSize(50, 50))   


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    app.setStyle("fusion")
    ex = Ui_MainWindow()
    ex.resize(300, 300)
    ex.show()
    sys.exit(app.exec_())

You can practice Border/Outline Generator

 1
Author: S. Nick, 2019-10-10 20:46:05

I achieved..., it is not clear how to choose the size of the icon and the size of the border, it turned out only the selection for a specific task, crooked, but the result is there!

enter a description of the image here

QPushButton:hover {
                  background-color: #E5E5E5;
                  border: 4px;
                  border-image: url("22.svg");
              }

Original icon:

enter a description of the image here

Maybe someone has thoughts on how to properly adjust the size?

 0
Author: biomotor, 2019-10-11 09:19:20